feat: add translation keys

components/settings/SettingsLanguage.vue

@@ -2,14 +2,17 @@
 import type { ComputedRef } from 'vue'
 import type { LocaleObject } from '#i18n'
 
-const userSettings = useUserSettings()
+const props = defineProps<{
+  language?: string
+}>()
+const model = useVModel(props, 'language')
 
 const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
 </script>
 
 <template>
-  <select v-model="userSettings.language">
+  <select v-model="model">
-    <option v-for="item in locales" :key="item.code" :value="item.code" :selected="userSettings.language === item.code">
+    <option v-for="item in locales" :key="item.code" :value="item.code" :selected="props.language === item.code">
       {{ item.name }}
     </option>
   </select>

composables/masto/statusDrafts.ts

@@ -1,5 +1,5 @@
-import type { mastodon } from 'masto'
 import type { ComputedRef, Ref } from 'vue'
+import type { mastodon } from 'masto'
 import { STORAGE_KEY_DRAFTS } from '~/constants'
 import type { Draft, DraftMap } from '~/types'
 import type { Mutable } from '~/types/utils'
@@ -11,6 +11,10 @@ export const builtinDraftKeys = [
   'home',
 ]
 
+function getLanguageCodeFromLocale(localeCode: string) {
+  return localeCode.substring(0, 2)
+}
+
 export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatusParams> & Omit<Draft, 'params'>> = {}): Draft {
   const {
     attachments = [],
@@ -20,9 +24,10 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatu
     visibility,
     sensitive,
     spoilerText,
-    language,
     mentions,
   } = options
+  const userSettings = $(useUserSettings())
+  const postLanguage = getLanguageCodeFromLocale(userSettings.writingLanguage)
 
   return {
     attachments,
@@ -33,7 +38,7 @@ export function getDefaultDraft(options: Partial<Mutable<mastodon.v1.CreateStatu
       visibility: visibility || 'public',
       sensitive: sensitive ?? false,
       spoilerText: spoilerText || '',
-      language: language || 'en',
+      language: postLanguage ?? 'en',
     },
     mentions,
     lastUpdated: Date.now(),
@@ -66,6 +71,7 @@ function getAccountsToMention(status: mastodon.v1.Status) {
 
 export function getReplyDraft(status: mastodon.v1.Status) {
   const accountsToMention = getAccountsToMention(status)
+  const { writingLanguage } = $(useUserSettings())
   return {
     key: `reply-${status.id}`,
     draft: () => {
@@ -74,6 +80,7 @@ export function getReplyDraft(status: mastodon.v1.Status) {
         inReplyToId: status!.id,
         visibility: status.visibility,
         mentions: accountsToMention,
+        language: getLanguageCodeFromLocale(writingLanguage),
       })
     },
   }
@@ -85,7 +92,6 @@ export const isEmptyDraft = (draft: Draft | null | undefined) => {
   const { params, attachments } = draft
   const status = params.status || ''
   const text = htmlToText(status).trim().replace(/^(@\S+\s?)+/, '').replaceAll(/```/g, '').trim()
-
   return (text.length === 0)
     && attachments.length === 0
     && (params.spoilerText || '').length === 0

composables/settings/definition.ts

@@ -17,6 +17,7 @@ export interface UserSettings {
   colorMode?: ColorMode
   fontSize: FontSize
   language: string
+  writingLanguage: string
   zenMode: boolean
 }
 
@@ -29,6 +30,7 @@ export function getDefaultLanguage(languages: string[]) {
 export function getDefaultUserSettings(locales: string[]): UserSettings {
   return {
     language: getDefaultLanguage(locales),
+    writingLanguage: getDefaultLanguage(locales),
     fontSize: DEFAULT_FONT_SIZE,
     zenMode: false,
     preferences: {},

locales/en-US.json

@@ -269,7 +269,8 @@
     },
     "language": {
       "display_language": "Display Language",
-      "label": "Language"
+      "label": "Language",
+      "writing_language": "Writing Language"
     },
     "notifications": {
       "label": "Notifications",

locales/fr-FR.json

@@ -262,7 +262,8 @@
     },
     "language": {
       "display_language": "Langue d'affichage",
-      "label": "Langue"
+      "label": "Langue",
+      "writing_language": "Langue d'écriture"
     },
     "notifications": {
       "label": "Notifications",

pages/settings/language/index.vue

@@ -4,6 +4,8 @@ const { t } = useI18n()
 useHeadFixed({
   title: () => `${t('settings.language.label')} | ${t('nav.settings')}`,
 })
+
+const userSettings = useUserSettings()
 </script>
 
 <template>
@@ -13,10 +15,14 @@ useHeadFixed({
         <span>{{ $t('settings.language.label') }}</span>
       </div>
     </template>
-    <div p6>
+    <div p6 flex="~ col gap6">
       <label space-y-2>
         <p font-medium>{{ $t('settings.language.display_language') }}</p>
-        <SettingsLanguage select-settings />
+        <SettingsLanguage v-model:language="userSettings.language" select-settings />
+      </label>
+      <label space-y-2>
+        <p font-medium>{{ $t('settings.language.writing_language') }}</p>
+        <SettingsLanguage v-model:language="userSettings.writingLanguage" select-settings />
       </label>
     </div>
   </MainContent>