From e00e4074e18b9d83b2072041c522de6c79291d0c Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Tue, 14 Nov 2023 23:34:56 +0900
Subject: [PATCH] feat: put account name copy button (#2347)

---
 components/account/AccountHeader.vue | 28 +++++++++++++++++++++++++++-
 locales/en.json                      |  1 +
 locales/ja-JP.json                   |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index b9534fbd..85d2cfe5 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -22,6 +22,7 @@ const namedFields = ref<mastodon.v1.AccountField[]>([])
 const iconFields = ref<mastodon.v1.AccountField[]>([])
 const isEditingPersonalNote = ref<boolean>(false)
 const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png'))
+const isCopied = ref<boolean>(false)
 
 function getFieldIconTitle(fieldName: string) {
   return fieldName === 'Joined' ? t('account.joined') : fieldName
@@ -105,6 +106,23 @@ const isSelf = $(useSelfAccount(() => account))
 const isNotifiedOnPost = $computed(() => !!relationship?.notifying)
 
 const personalNoteMaxLength = 2000
+
+async function copyAccountName() {
+  try {
+    const shortHandle = getShortHandle(account)
+    const serverName = getServerName(account)
+    const accountName = `${shortHandle}@${serverName}`
+    await navigator.clipboard.writeText(accountName)
+  }
+  catch (err) {
+    console.error('Failed to copy account name:', err)
+  }
+
+  isCopied.value = true
+  setTimeout(() => {
+    isCopied.value = false
+  }, 2000)
+}
 </script>
 
 <template>
@@ -175,7 +193,15 @@ const personalNoteMaxLength = 2000
             <AccountLockIndicator v-if="account.locked" show-label />
             <AccountBotIndicator v-if="account.bot" show-label />
           </div>
-          <AccountHandle :account="account" overflow-unset line-clamp-unset />
+
+          <div flex items-center gap-1>
+            <AccountHandle :account="account" overflow-unset line-clamp-unset />
+            <CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
+              <button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
+                <span sr-only>{{ $t('account.copy_account_name') }}</span>
+              </button>
+            </CommonTooltip>
+          </div>
         </div>
       </div>
       <label
diff --git a/locales/en.json b/locales/en.json
index 0677ef40..a5cc69e9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -15,6 +15,7 @@
     "blocked_users": "Blocked users",
     "blocking": "Blocked",
     "bot": "BOT",
+    "copy_account_name": "Copy account name",
     "favourites": "Favorites",
     "follow": "Follow",
     "follow_back": "Follow back",
diff --git a/locales/ja-JP.json b/locales/ja-JP.json
index 952c6869..d6682265 100644
--- a/locales/ja-JP.json
+++ b/locales/ja-JP.json
@@ -13,6 +13,7 @@
     "blocked_users": "ブロックしたユーザー",
     "blocking": "ブロック中",
     "bot": "BOT",
+    "copy_account_name": "アカウント名をコピー",
     "favourites": "お気に入り",
     "follow": "フォローする",
     "follow_back": "フォローバックする",