From 4ea44ff8600bd3390e5e6da60e3de2e8afc96232 Mon Sep 17 00:00:00 2001
From: Aggre <hiroyuki.aggre@gmail.com>
Date: Sun, 26 Jan 2025 10:28:46 +0900
Subject: [PATCH] update PostButton

---
 src/components/Global/Header.astro            |  1 +
 src/pages/passport/Layout.astro               | 30 +++++--
 src/pages/passport/[eoa]/[...ids]/index.astro | 11 +--
 src/pages/passport/[id]/edit.astro            |  2 +
 src/pages/passport/components/PostButton.vue  | 78 ++++++++++++++-----
 .../components/UserProfileEditButton.svelte   | 44 -----------
 6 files changed, 86 insertions(+), 80 deletions(-)
 delete mode 100644 src/pages/passport/components/UserProfileEditButton.svelte

diff --git a/src/components/Global/Header.astro b/src/components/Global/Header.astro
index 97059f8e8..f95e95c10 100644
--- a/src/components/Global/Header.astro
+++ b/src/components/Global/Header.astro
@@ -8,6 +8,7 @@ import NavbarResponsive from './NavbarResponsive.vue'
 
 type Props = {
   connectButton?: 'show' | 'hidden' | 'show-when-signedin'
+  postButton?: 'show' | 'hidden' | 'show-when-signedin'
   pageTitle?: string
 }
 
diff --git a/src/pages/passport/Layout.astro b/src/pages/passport/Layout.astro
index 6e20d2e07..25b489270 100644
--- a/src/pages/passport/Layout.astro
+++ b/src/pages/passport/Layout.astro
@@ -23,6 +23,7 @@ type Props = {
   preload?: { as: string; href: string }[]
   connectButton?: 'show' | 'hidden' | 'show-when-signedin'
   showSkinSwitcher?: boolean
+  showPostButton?: 'hidden' | 'post' | 'edit'
 }
 
 const {
@@ -35,6 +36,7 @@ const {
   preload = [],
   connectButton,
   showSkinSwitcher = true,
+  showPostButton = 'hidden',
 } = Astro.props as Props
 
 const passportSkinTheme = await whenDefined(sTokenPayload, (payload: string) =>
@@ -150,12 +152,28 @@ const langs = parseAcceptLanguage(Astro.request.headers.get('Accept-Language'))
             />
           )
         }
-        <PostButton
-          client:load
-          slot="header:before:sibling:connect-button"
-          {langs}
-        />
-        <PostButton client:load slot="header:before:mobile-open-bar" {langs} />
+        {
+          showPostButton !== 'hidden' && (
+            <PostButton
+              client:only="vue"
+              slot="header:before:sibling:connect-button"
+              skinId={selectedSkinId}
+              mode={showPostButton}
+              {eoa}
+            />
+          )
+        }
+        {
+          showPostButton !== 'hidden' && (
+            <PostButton
+              client:only="vue"
+              slot="header:before:mobile-open-bar"
+              skinId={selectedSkinId}
+              mode={showPostButton}
+              {eoa}
+            />
+          )
+        }
       </Header>
 
       <div
diff --git a/src/pages/passport/[eoa]/[...ids]/index.astro b/src/pages/passport/[eoa]/[...ids]/index.astro
index e79caedd3..bd6e03cbc 100644
--- a/src/pages/passport/[eoa]/[...ids]/index.astro
+++ b/src/pages/passport/[eoa]/[...ids]/index.astro
@@ -17,7 +17,6 @@ import Icon from '../../components/Icons.vue'
 import type { PassportClip } from '../../types'
 import Like from '../../components/Like.svelte'
 import PassportClips from '../../components/PassportClips.vue'
-import UserProfileEditButton from '../../components/UserProfileEditButton.svelte'
 import { clubsUrlToKeccak256Tag } from '@plugins/achievements/utils'
 import MediaSDKs from '@components/Passports/MediaSDKs.astro'
 import Onboarding from '../../components/Onboarding.vue'
@@ -168,6 +167,7 @@ const [
   itemHash={passportElementId}
   preload={[{ as: 'image', href: RedHeart.src }]}
   connectButton="show"
+  showPostButton="edit"
 >
   <div class="grid gap-6 lg:gap-24 mb-32">
     <section class:list={passportClass('account-container')}>
@@ -235,15 +235,6 @@ const [
                 </div>
               )
             }
-
-            <span class="empty:hidden">
-              <UserProfileEditButton
-                client:only="svelte"
-                address={eoa}
-                skinId={skin?.id ?? ''}
-                additionalClasses={passportClass('edit-button')}
-              />
-            </span>
           </span>
         </span>
 
diff --git a/src/pages/passport/[id]/edit.astro b/src/pages/passport/[id]/edit.astro
index 9cbf6dd61..66a32c5ef 100644
--- a/src/pages/passport/[id]/edit.astro
+++ b/src/pages/passport/[id]/edit.astro
@@ -19,6 +19,8 @@ const isLocal =
   connectButton="show-when-signedin"
   theme="light"
   showSkinSwitcher={false}
+  showPostButton="post"
+  eoa={id}
 >
   <div class="@container/main">
     <div class="mx-auto container">
diff --git a/src/pages/passport/components/PostButton.vue b/src/pages/passport/components/PostButton.vue
index 907a05a32..88bdb334b 100644
--- a/src/pages/passport/components/PostButton.vue
+++ b/src/pages/passport/components/PostButton.vue
@@ -2,14 +2,22 @@
 import { i18nFactory } from '@devprotocol/clubs-core'
 import { Strings } from '../i18n'
 import { onMounted, ref } from 'vue'
+import { connection } from '@devprotocol/clubs-core/connection'
 
-const props = defineProps<{ langs: string[] }>()
+const props = defineProps<{
+  eoa?: string
+  skinId?: string
+  mode?: 'post' | 'edit'
+}>()
 
 const i18nBase = i18nFactory(Strings)
-const i18n = ref(i18nBase(props.langs))
+const i18n = ref(i18nBase(navigator.languages))
+const account = ref<string>()
 
 onMounted(() => {
-  i18n.value = i18nBase(navigator.languages)
+  connection().account.subscribe((acc) => {
+    account.value = acc
+  })
 })
 
 const click = () => {
@@ -20,22 +28,52 @@ const click = () => {
 </script>
 
 <template>
-  <button @click="click" class="hs-button is-filled is-large !rounded-full">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      class="size-6"
+  <template v-if="props.eoa === account">
+    <button
+      v-if="props.mode === 'post'"
+      @click="click"
+      class="hs-button is-filled is-large !rounded-full"
     >
-      <path
-        fill-rule="evenodd"
-        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-
-    <span class="font-bold">
-      {{ i18n('Post') }}
-    </span>
-  </button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        class="size-6"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+
+      <span class="font-bold">
+        {{ i18n('Post') }}
+      </span>
+    </button>
+
+    <a
+      v-if="props.mode === 'edit'"
+      :href="`/passport/${eoa}/edit${props.skinId ? `?skinId=${props.skinId}` : ''}`"
+      class="hs-button is-filled is-large !rounded-full"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-5"
+      >
+        <path
+          d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"
+        />
+        <path
+          d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"
+        />
+      </svg>
+
+      <span class="font-bold">
+        {{ i18n('Edit') }}
+      </span>
+    </a>
+  </template>
 </template>
diff --git a/src/pages/passport/components/UserProfileEditButton.svelte b/src/pages/passport/components/UserProfileEditButton.svelte
deleted file mode 100644
index bced6f209..000000000
--- a/src/pages/passport/components/UserProfileEditButton.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import type { UndefinedOr } from '@devprotocol/util-ts'
-  import type { connection as Connection } from '@devprotocol/clubs-core/connection'
-
-  export let skinId: string = ''
-  export let address: string | undefined
-  export let additionalClasses: string = ''
-
-  let connection: UndefinedOr<typeof Connection> = undefined
-  let eoa: UndefinedOr<string> = undefined
-
-  onMount(async () => {
-    const { connection: _conn } = await import(
-      '@devprotocol/clubs-core/connection'
-    )
-    connection = _conn
-    eoa = connection()?.account?.getValue()
-    connection().account.subscribe((acc) => {
-      eoa = acc
-    })
-  })
-</script>
-
-{#if eoa === address}
-  <a
-    href={`/passport/${address}/edit?skinId=${skinId}`}
-    class={additionalClasses}
-    ><svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="1.5"
-      stroke="currentColor"
-      class="w-6 h-6"
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"
-      />
-    </svg>
-  </a>
-{/if}