From cd2a06e9696e3b20ef5e6c6a59a80a17a992a160 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 24 Nov 2022 15:53:27 +0800
Subject: [PATCH] ui: move publish widget

---
 components/account/AccountCard.vue   |  2 +
 components/publish/PublishWidget.vue | 77 +++++++++++++++-------------
 composables/cache.ts                 | 19 +++----
 layouts/default.vue                  |  5 +-
 pages/home.vue                       |  1 +
 pages/status/[status].vue            | 15 +++---
 unocss.config.ts                     |  8 +--
 7 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/components/account/AccountCard.vue b/components/account/AccountCard.vue
index 7d144995..c0d32b93 100644
--- a/components/account/AccountCard.vue
+++ b/components/account/AccountCard.vue
@@ -4,6 +4,8 @@ import type { Account } from 'masto'
 const { account } = defineProps<{
   account: Account
 }>()
+
+cacheAccount(account)
 </script>
 
 <template>
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index dbd984d0..9f28b1cb 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Attachment, CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
+import type { CreateStatusParams, CreateStatusParamsWithStatus } from 'masto'
 
 const {
   draftKey,
@@ -103,45 +103,48 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div
-    flex flex-col gap-3
-    :class="isSending ? 'pointer-events-none' : ''"
-  >
-    <textarea
-      v-model="draft.params.status"
-      :placeholder="placeholder"
-      p2 border-rounded w-full h-40
-      bg-gray:10 outline-none border="~ base"
-      @paste="handlePaste"
-    />
-
-    <div flex="~" gap-2>
-      <button hover:bg-active p2 rounded-5 @click="pickAttachments">
-        <div i-ri:upload-line />
-      </button>
-    </div>
-
-    <div flex="~ col gap-2" max-h-50vh overflow-auto>
-      <publish-attachment
-        v-for="(att, idx) in draft.attachments" :key="att.id"
-        :attachment="att"
-        @remove="removeAttachment(idx)"
+  <div v-if="currentUser" border="t base" p4 flex gap-4>
+    <AccountAvatar :account="currentUser.account" w-12 h-12 />
+    <div
+      flex flex-col gap-3 flex-auto
+      :class="isSending ? 'pointer-events-none' : ''"
+    >
+      <textarea
+        v-model="draft.params.status"
+        :placeholder="placeholder"
+        p2 border-rounded w-full bg-transparent
+        outline-none border="~ base"
+        @paste="handlePaste"
       />
-    </div>
 
-    <div v-if="isUploading" flex gap-2 justify-end items-center>
-      <div op50 i-ri:loader-2-fill animate-spin text-2xl />
-      Uploading...
-    </div>
+      <div flex="~ col gap-2" max-h-50vh overflow-auto>
+        <PublishAttachment
+          v-for="(att, idx) in draft.attachments" :key="att.id"
+          :attachment="att"
+          @remove="removeAttachment(idx)"
+        />
+      </div>
 
-    <div flex justify-end>
-      <button
-        btn-solid
-        :disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
-        @click="publish"
-      >
-        Publish!
-      </button>
+      <div v-if="isUploading" flex gap-2 justify-end items-center>
+        <div op50 i-ri:loader-2-fill animate-spin text-2xl />
+        Uploading...
+      </div>
+
+      <div flex="~ gap-2">
+        <button btn-action-icon @click="pickAttachments">
+          <div i-ri:upload-line />
+        </button>
+
+        <div flex-auto />
+
+        <button
+          btn-solid rounded-full
+          :disabled="isUploading || (draft.attachments.length === 0 && !draft.params.status)"
+          @click="publish"
+        >
+          Publish!
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/composables/cache.ts b/composables/cache.ts
index 37f632cb..38f9ff13 100644
--- a/composables/cache.ts
+++ b/composables/cache.ts
@@ -9,8 +9,9 @@ if (process.dev)
   // eslint-disable-next-line no-console
   console.log({ cache })
 
-export function setCached(key: string, value: any) {
-  cache.set(key, value)
+export function setCached(key: string, value: any, override = false) {
+  if (override || !cache.has(key))
+    cache.set(key, value)
 }
 
 export function fetchStatus(id: string) {
@@ -34,7 +35,7 @@ export function fetchAccount(id: string) {
     return cached
   const promise = masto.accounts.fetch(id)
     .then((account) => {
-      cacheAccount(account)
+      cacheAccount(account, true)
       return account
     })
   cache.set(key, promise)
@@ -48,18 +49,18 @@ export function fetchAccountByName(acct: string) {
     return cached
   const account = masto.accounts.lookup({ acct })
     .then((r) => {
-      cacheAccount(r)
+      cacheAccount(r, true)
       return r
     })
   cache.set(key, account)
   return account
 }
 
-export function cacheStatus(status: Status) {
-  setCached(`status:${status.id}`, status)
+export function cacheStatus(status: Status, override?: boolean) {
+  setCached(`status:${status.id}`, status, override)
 }
 
-export function cacheAccount(account: Account) {
-  setCached(`account:${account.id}`, account)
-  setCached(`account:${account.acct}`, account)
+export function cacheAccount(account: Account, override?: boolean) {
+  setCached(`account:${account.id}`, account, override)
+  setCached(`account:${account.acct}`, account, override)
 }
diff --git a/layouts/default.vue b/layouts/default.vue
index 0c092d98..03b01797 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,10 +4,7 @@
       <div class="hidden md:block w-1/4 zen-hide" relative>
         <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
-            <template v-if="currentUser">
-              <PublishWidget px4 mt16 draft-key="home" />
-            </template>
-            <UserSignInEntry v-else />
+            <UserSignInEntry v-if="!currentUser" />
             <div flex-auto />
             <AccountInfo
               v-if="currentUser"
diff --git a/pages/home.vue b/pages/home.vue
index f10c0ba3..eaa04564 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -12,6 +12,7 @@ const paginator = masto.timelines.getHomeIterable()
       <span text-lg font-bold>Home</span>
     </template>
     <slot>
+      <PublishWidget draft-key="home" border="b base" />
       <TimelinePaginator :paginator="paginator" />
     </slot>
   </MainContent>
diff --git a/pages/status/[status].vue b/pages/status/[status].vue
index bd2792ee..13362818 100644
--- a/pages/status/[status].vue
+++ b/pages/status/[status].vue
@@ -18,15 +18,12 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
     </template>
 
     <StatusDetails ref="main" :status="status" border="t base" />
-    <div v-if="currentUser" border="t base" p6 flex gap-4>
-      <AccountAvatar :account="currentUser.account" w-10 h-10 />
-      <PublishWidget
-        w-full
-        :draft-key="`reply-${id}`"
-        :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
-        :in-reply-to-id="id"
-      />
-    </div>
+    <PublishWidget
+      v-if="currentUser"
+      :draft-key="`reply-${id}`"
+      :placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
+      :in-reply-to-id="id"
+    />
 
     <template v-if="context">
       <template v-for="comment of context?.descendants" :key="comment.id">
diff --git a/unocss.config.ts b/unocss.config.ts
index 18d32112..8151685d 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -19,9 +19,11 @@ export default defineConfig({
       'text-base': 'text-$c-text-base',
       'text-secondary': 'text-$c-text-secondary',
       'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
-      'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
-      'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
-      'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled cursor-pointer',
+      'btn-base': 'interact-disabled cursor-pointer',
+      'btn-solid': 'btn-base px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active',
+      'btn-outline': 'btn-base px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white',
+      'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
+      'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
     },
   ],
   presets: [