From dfd8b8968ae9d39af8f63046cfef814243d2849f Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Wed, 21 Dec 2022 15:46:36 +0800
Subject: [PATCH] feat: improve status detail page title (#485)

---
 components/status/StatusDetails.vue             | 6 ++++++
 composables/utils.ts                            | 5 +++++
 locales/en-US.json                              | 1 +
 locales/zh-CN.json                              | 3 ++-
 pages/[[server]]/@[account]/index/following.vue | 2 +-
 5 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 2b3e0290..e2fa752d 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -15,6 +15,12 @@ const status = $computed(() => {
 const createdAt = useFormattedDateTime(status.createdAt)
 
 const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === status.visibility)!)
+
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
+})
 </script>
 
 <template>
diff --git a/composables/utils.ts b/composables/utils.ts
index e422a4d2..e418fded 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -2,6 +2,7 @@ import type { Emoji } from 'masto'
 
 export const UserLinkRE = /^https?:\/\/([^/]+)\/@([^/]+)$/
 export const TagLinkRE = /^https?:\/\/([^/]+)\/tags\/([^/]+)$/
+export const HTMLTagRE = /<[^>]+>/g
 
 export function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
   if (typeof w === 'undefined' || typeof h === 'undefined')
@@ -29,3 +30,7 @@ export function noop() {}
 export const useIsMac = () => computed(() =>
   useRequestHeaders(['user-agent'])['user-agent']?.includes('Macintosh')
     ?? navigator?.platform?.includes('Mac') ?? false)
+
+export function removeHTMLTags(str: string) {
+  return str.replaceAll(HTMLTagRE, '')
+}
diff --git a/locales/en-US.json b/locales/en-US.json
index 9425eb12..3f7df61f 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -69,6 +69,7 @@
   "common": {
     "end_of_list": "End of the list",
     "error": "ERROR",
+    "in": "in",
     "kiloSuffix": "K",
     "megaSuffix": "M",
     "not_found": "404 Not Found",
diff --git a/locales/zh-CN.json b/locales/zh-CN.json
index f4e8db53..81146c8c 100644
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@@ -12,7 +12,7 @@
     "follow_requested": "已申请关注",
     "followers": "关注者",
     "followers_count": "被 {0} 人关注",
-    "following": "关注中",
+    "following": "正在关注",
     "following_count": "正在关注 {0} 人",
     "follows_you": "已关注你",
     "go_to_profile": "转到个人资料",
@@ -68,6 +68,7 @@
   "common": {
     "end_of_list": "列表到底啦",
     "error": "错误",
+    "in": "在",
     "kiloSuffix": "K",
     "megaSuffix": "M",
     "not_found": "无法找到相关内容",
diff --git a/pages/[[server]]/@[account]/index/following.vue b/pages/[[server]]/@[account]/index/following.vue
index 80e2b8c1..6de806b1 100644
--- a/pages/[[server]]/@[account]/index/following.vue
+++ b/pages/[[server]]/@[account]/index/following.vue
@@ -10,7 +10,7 @@ const paginator = account ? useMasto().accounts.iterateFollowing(account.id, {})
 
 if (account) {
   useHeadFixed({
-    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account})`,
+    title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
 </script>