From 2a4862fb42e12df15437c13587eee84846576e83 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 30 Jan 2023 12:09:04 +0100
Subject: [PATCH] feat(ui): display post language

---
 components/publish/PublishLanguagePicker.vue | 14 ++-----------
 components/publish/PublishWidget.vue         | 22 ++++++++++++--------
 composables/langugage.ts                     | 11 ++++++++++
 3 files changed, 26 insertions(+), 21 deletions(-)
 create mode 100644 composables/langugage.ts

diff --git a/components/publish/PublishLanguagePicker.vue b/components/publish/PublishLanguagePicker.vue
index bd7f139b..d0532cc7 100644
--- a/components/publish/PublishLanguagePicker.vue
+++ b/components/publish/PublishLanguagePicker.vue
@@ -10,17 +10,7 @@ const { t } = useI18n()
 
 const languageKeyword = $ref('')
 
-const languageList: {
-  code: string
-  nativeName: string
-  name: string
-}[] = ISO6391.getAllCodes().map(code => ({
-  code,
-  nativeName: ISO6391.getNativeName(code),
-  name: ISO6391.getName(code),
-}))
-
-const fuse = new Fuse(languageList, {
+const fuse = new Fuse(languagesNameList, {
   keys: ['code', 'nativeName', 'name'],
   shouldSort: true,
 })
@@ -28,7 +18,7 @@ const fuse = new Fuse(languageList, {
 const languages = $computed(() =>
   languageKeyword.trim()
     ? fuse.search(languageKeyword).map(r => r.item)
-    : [...languageList].sort(({ code: a }, { code: b }) => {
+    : [...languagesNameList].sort(({ code: a }, { code: b }) => {
         return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b)
       }),
 )
diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 93eed711..dfbc0c95 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -62,6 +62,7 @@ const { editor } = useTiptap({
   },
   onPaste: handlePaste,
 })
+
 const characterCount = $computed(() => {
   let length = stringLength(htmlToText(editor.value?.getHTML() || ''))
 
@@ -76,6 +77,8 @@ const characterCount = $computed(() => {
   return length
 })
 
+const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === draft.params.language)?.nativeName)
+
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
   if (!files || files.length === 0)
@@ -278,17 +281,11 @@ defineExpose({
           {{ characterCount ?? 0 }}<span text-secondary-light>/</span><span text-secondary-light>{{ characterLimit }}</span>
         </div>
 
-        <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
-          <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
-            <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
-            <div v-else i-ri:alarm-warning-line />
-          </button>
-        </CommonTooltip>
-
         <CommonTooltip placement="top" :content="$t('tooltip.change_language')">
           <CommonDropdown placement="bottom" auto-boundary-max-size>
-            <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-12 mr--1>
-              <div i-ri:translate-2 />
+            <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
+              <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
+              <div v-else i-ri:translate-2 />
               <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
             </button>
 
@@ -298,6 +295,13 @@ defineExpose({
           </CommonDropdown>
         </CommonTooltip>
 
+        <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')">
+          <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
+            <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
+            <div v-else i-ri:alarm-warning-line />
+          </button>
+        </CommonTooltip>
+
         <PublishVisibilityPicker v-model="draft.params.visibility" :editing="!!draft.editingStatus">
           <template #default="{ visibility }">
             <button :disabled="!!draft.editingStatus" :aria-label="$t('tooltip.change_content_visibility')" btn-action-icon :class="{ 'w-12': !draft.editingStatus }">
diff --git a/composables/langugage.ts b/composables/langugage.ts
new file mode 100644
index 00000000..2584afc8
--- /dev/null
+++ b/composables/langugage.ts
@@ -0,0 +1,11 @@
+import ISO6391 from 'iso-639-1'
+
+export const languagesNameList: {
+  code: string
+  nativeName: string
+  name: string
+}[] = ISO6391.getAllCodes().map(code => ({
+  code,
+  nativeName: ISO6391.getNativeName(code),
+  name: ISO6391.getName(code),
+}))