fix: avoid reference context in `getDefaultDraft`

components/publish/PublishLanguagePicker.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import ISO6391 from 'iso-639-1'
 import Fuse from 'fuse.js'
 
 let { modelValue } = $defineModel<{
@@ -29,13 +28,15 @@ function chooseLanguage(language: string) {
 </script>
 
 <template>
-  <div>
-    <input
-      v-model="languageKeyword"
-      :placeholder="t('language.search')"
-      p2 mb2 border-rounded w-full bg-transparent
-      outline-none border="~ base"
-    >
+  <div relative of-x-hidden>
+    <div p2>
+      <input
+        v-model="languageKeyword"
+        :placeholder="t('language.search')"
+        p2 border-rounded w-full bg-transparent
+        outline-none border="~ base"
+      >
+    </div>
     <div max-h-40vh overflow-auto>
       <CommonDropdownItem
         v-for="{ code, nativeName, name } in languages"

components/publish/PublishWidget.vue

@@ -35,7 +35,7 @@ const {
   dropZoneRef,
 } = $(useUploadMediaAttachment($$(draft)))
 
-let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages } = $(usePublish(
+let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage } = $(usePublish(
   {
     draftState,
     ...$$({ expanded, isUploading, initialDraft: initial }),
@@ -77,7 +77,7 @@ const characterCount = $computed(() => {
   return length
 })
 
-const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === draft.params.language)?.nativeName)
+const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName)
 
 async function handlePaste(evt: ClipboardEvent) {
   const files = evt.clipboardData?.files
@@ -290,7 +290,7 @@ defineExpose({
             </button>
 
             <template #popper>
-              <PublishLanguagePicker v-model="draft.params.language" min-w-80 p3 />
+              <PublishLanguagePicker v-model="draft.params.language" min-w-80 />
             </template>
           </CommonDropdown>
         </CommonTooltip>

composables/masto/publish.ts

@@ -4,15 +4,18 @@ import type { mastodon } from 'masto'
 import type { UseDraft } from './statusDrafts'
 import type { Draft } from '~~/types'
 
-export const usePublish = (options: {
+export function usePublish(options: {
   draftState: UseDraft
   expanded: Ref<boolean>
   isUploading: Ref<boolean>
   initialDraft: Ref<() => Draft>
-}) => {
+}) {
   const { expanded, isUploading, initialDraft } = $(options)
   let { draft, isEmpty } = $(options.draftState)
   const { client } = $(useMasto())
+  const settings = useUserSettings()
+
+  const preferredLanguage = $computed(() => (settings.value?.language || 'en').split('-')[0])
 
   let isSending = $ref(false)
   const isExpanded = $ref(false)
@@ -31,6 +34,7 @@ export const usePublish = (options: {
   async function publishDraft() {
     if (isPublishDisabled)
       return
+
     let content = htmlToText(draft.params.status || '')
     if (draft.mentions?.length)
       content = `${draft.mentions.map(i => `@${i}`).join(' ')} ${content}`
@@ -39,11 +43,12 @@ export const usePublish = (options: {
       ...draft.params,
       status: content,
       mediaIds: draft.attachments.map(a => a.id),
+      language: draft.params.language || preferredLanguage,
       ...(isGlitchEdition.value ? { 'content-type': 'text/markdown' } : {}),
     } as mastodon.v1.CreateStatusParams
 
     if (process.dev) {
-    // eslint-disable-next-line no-console
+      // eslint-disable-next-line no-console
       console.info({
         raw: draft.params.status,
         ...payload,
@@ -60,6 +65,7 @@ export const usePublish = (options: {
       let status: mastodon.v1.Status
       if (!draft.editingStatus)
         status = await client.v1.statuses.create(payload)
+
       else
         status = await client.v1.statuses.update(draft.editingStatus.id, payload)
       if (draft.params.inReplyToId)
@@ -84,14 +90,14 @@ export const usePublish = (options: {
     shouldExpanded,
     isPublishDisabled,
     failedMessages,
-
+    preferredLanguage,
     publishDraft,
   })
 }
 
 export type MediaAttachmentUploadError = [filename: string, message: string]
 
-export const useUploadMediaAttachment = (draftRef: Ref<Draft>) => {
+export function useUploadMediaAttachment(draftRef: Ref<Draft>) {
   const draft = $(draftRef)
   const { client } = $(useMasto())
   const { t } = useI18n()
@@ -117,7 +123,7 @@ export const useUploadMediaAttachment = (draftRef: Ref<Draft>) => {
           draft.attachments.push(attachment)
         }
         catch (e) {
-        // TODO: add some human-readable error message, problem is that masto api will not return response code
+          // TODO: add some human-readable error message, problem is that masto api will not return response code
           console.error(e)
           failedAttachments = [...failedAttachments, [file.name, (e as Error).message]]
         }
@@ -159,9 +165,10 @@ export const useUploadMediaAttachment = (draftRef: Ref<Draft>) => {
   return $$({
     isUploading,
     isExceedingAttachmentLimit,
+    isOverDropZone,
+
     failedAttachments,
     dropZoneRef,
-    isOverDropZone,
 
     uploadAttachments,
     pickAttachments,

composables/masto/statusDrafts.ts

@@ -33,7 +33,7 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatu
       visibility: visibility || 'public',
       sensitive: sensitive ?? false,
       spoilerText: spoilerText || '',
-      language: language || getDefaultLanguage(),
+      language: language || '', // auto inferred from current language on posting
     },
     mentions,
     lastUpdated: Date.now(),
@@ -52,16 +52,6 @@ export async function getDraftFromStatus(status: mastodon.v1.Status): Promise<Dr
   })
 }
 
-function getDefaultLanguage() {
-  const userSettings = useUserSettings()
-  const defaultLanguage = userSettings.value.language
-
-  if (defaultLanguage)
-    return defaultLanguage.split('-')[0]
-
-  return 'en'
-}
-
 function getAccountsToMention(status: mastodon.v1.Status) {
   const userId = currentUser.value?.account.id
   const accountsToMention = new Set<string>()