feat(publish): hoist selected language and none

components/publish/PublishLanguagePicker.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import ISO6391 from 'iso-639-1'
+import Fuse from 'fuse.js'
+
+let { modelValue } = $defineModel<{
+  modelValue: string | null | undefined
+}>()
+
+const { t } = useI18n()
+
+const languageKeyword = $ref('')
+
+const languageList: {
+  code: string | null
+  nativeName: string
+  name?: string
+}[] = [{
+  code: null,
+  nativeName: t('language.none'),
+}, ...ISO6391.getAllCodes().map(code => ({
+  code,
+  nativeName: ISO6391.getNativeName(code),
+  name: ISO6391.getName(code),
+}))]
+
+const fuse = new Fuse(languageList, {
+  keys: ['code', 'nativeName', 'name'],
+  shouldSort: true,
+})
+
+const languages = $computed(() =>
+  languageKeyword.trim()
+    ? fuse.search(languageKeyword).map(r => r.item)
+    : [...languageList].sort(({ code: a }, { code: b }) => {
+        return a === modelValue
+          ? -1
+          : b === modelValue
+            ? 1
+            : (a === null ? -1 : b === null ? 1 : a.localeCompare(b))
+      }),
+)
+
+function chooseLanguage(language: string | null) {
+  modelValue = language
+}
+</script>
+
+<template>
+  <div>
+    <input
+      v-model="languageKeyword"
+      :placeholder="t('language.search')"
+      p2 mb2 border-rounded w-full bg-transparent
+      outline-none border="~ base"
+    >
+    <div max-h-40vh overflow-auto>
+      <CommonDropdownItem
+        v-for="{ code, nativeName, name } in languages"
+        :key="code"
+        :checked="code === (modelValue || null)"
+        @click="chooseLanguage(code)"
+      >
+        {{ nativeName }}
+        <template #description>
+          <template v-if="name">
+            {{ name }}
+          </template>
+        </template>
+      </CommonDropdownItem>
+    </div>
+  </div>
+</template>

components/publish/PublishWidget.vue

@@ -3,8 +3,6 @@ import type { Attachment, CreateStatusParams, Status, StatusVisibility } from 'm
 import { fileOpen } from 'browser-fs-access'
 import { useDropZone } from '@vueuse/core'
 import { EditorContent } from '@tiptap/vue-3'
-import ISO6391 from 'iso-639-1'
-import Fuse from 'fuse.js'
 import { statusVisibilities } from '~/composables/masto/icons'
 import type { Draft } from '~/types'
 
@@ -138,10 +136,6 @@ function chooseVisibility(visibility: StatusVisibility) {
   draft.params.visibility = visibility
 }
 
-function chooseLanguage(language: string | null) {
-  draft.params.language = language
-}
-
 async function publish() {
   const payload = {
     ...draft.params,
@@ -188,29 +182,6 @@ async function onDrop(files: File[] | null) {
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
 
-const languageKeyword = $ref('')
-const languageList: {
-  code: string | null
-  nativeName: string
-  name?: string
-}[] = [{
-  code: null,
-  nativeName: t('language.none'),
-}, ...ISO6391.getAllCodes().map(code => ({
-  code,
-  nativeName: ISO6391.getNativeName(code),
-  name: ISO6391.getName(code),
-}))]
-const fuse = new Fuse(languageList, {
-  keys: ['code', 'nativeName', 'name'],
-  shouldSort: true,
-})
-const languages = $computed(() =>
-  languageKeyword.trim()
-    ? fuse.search(languageKeyword).map(r => r.item)
-    : languageList,
-)
-
 defineExpose({
   focusEditor: () => {
     editor.value?.commands?.focus?.()
@@ -363,27 +334,7 @@ defineExpose({
 
             <template #popper>
               <div min-w-80 p3>
-                <input
+                <PublishLanguagePicker v-model="draft.params.language" />
-                  v-model="languageKeyword"
-                  :placeholder="t('language.search')"
-                  p2 mb2 border-rounded w-full bg-transparent
-                  outline-none border="~ base"
-                >
-                <div max-h-40vh overflow-auto>
-                  <CommonDropdownItem
-                    v-for="{ code, nativeName, name } in languages"
-                    :key="code"
-                    :checked="code === (draft.params.language || null)"
-                    @click="chooseLanguage(code)"
-                  >
-                    {{ nativeName }}
-                    <template #description>
-                      <template v-if="name">
-                        {{ name }}
-                      </template>
-                    </template>
-                  </CommonDropdownItem>
-                </div>
               </div>
             </template>
           </CommonDropdown>