From 73a2e777023677cf4f2f48147e56602679243265 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Fri, 5 Jul 2024 00:50:53 +0900
Subject: [PATCH 1/2] Set locale for emoji picker

---
 src/components/detail/Detail.tsx                | 17 +++++++++++++++--
 src/components/detail/List.tsx                  |  2 ++
 src/components/detail/Profile.tsx               |  2 ++
 src/components/detail/Status.tsx                |  2 ++
 src/components/detail/Tag.tsx                   |  2 ++
 src/components/detail/profile/Posts.tsx         |  3 +++
 .../fromOtherAccount/FromOtherAccount.tsx       |  2 ++
 src/components/fromOtherAccount/Status.tsx      |  4 ++++
 src/components/search/Results.tsx               |  2 ++
 src/components/search/Search.tsx                |  2 ++
 src/components/timelines/Notifications.tsx      |  2 ++
 src/components/timelines/Show.tsx               |  3 +++
 src/components/timelines/Timeline.tsx           |  2 ++
 .../timelines/notification/Notification.tsx     |  3 +++
 .../timelines/notification/Reaction.tsx         |  2 ++
 src/components/timelines/status/Actions.tsx     |  4 ++++
 src/components/timelines/status/Status.tsx      |  2 ++
 src/pages/index.tsx                             |  6 ++++++
 18 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/detail/Detail.tsx b/src/components/detail/Detail.tsx
index b054bf23..2a2b01b0 100644
--- a/src/components/detail/Detail.tsx
+++ b/src/components/detail/Detail.tsx
@@ -17,6 +17,7 @@ type Props = {
   openFromOtherAccount: (status: Entity.Status) => void
   openListMemberships: (list: Entity.List, client: MegalodonInterface) => void
   openAddListMember: (user: Entity.Account, client: MegalodonInterface) => void
+  locale: string
 }
 
 const Detail: React.FC<Props> = props => {
@@ -59,6 +60,7 @@ const Detail: React.FC<Props> = props => {
                 }
                 openReport={props.openReport}
                 openFromOtherAccount={props.openFromOtherAccount}
+                locale={props.locale}
               />
             )}
             {target === 'profile' && (
@@ -67,14 +69,25 @@ const Detail: React.FC<Props> = props => {
                 openReport={props.openReport}
                 openFromOtherAccount={props.openFromOtherAccount}
                 openAddListMember={props.openAddListMember}
+                locale={props.locale}
               />
             )}
             {target === 'tag' && (
-              <TagDetail openMedia={props.openMedia} openReport={props.openReport} openFromOtherAccount={props.openFromOtherAccount} />
+              <TagDetail
+                openMedia={props.openMedia}
+                openReport={props.openReport}
+                openFromOtherAccount={props.openFromOtherAccount}
+                locale={props.locale}
+              />
             )}
             {target === 'lists' && <ListsDetail openListMemberships={props.openListMemberships} />}
             {target === 'list' && (
-              <ListDetail openMedia={props.openMedia} openReport={props.openReport} openFromOtherAccount={props.openFromOtherAccount} />
+              <ListDetail
+                openMedia={props.openMedia}
+                openReport={props.openReport}
+                openFromOtherAccount={props.openFromOtherAccount}
+                locale={props.locale}
+              />
             )}
             {target === 'followed_hashtags' && <FollowedHashtags />}
           </Container>
diff --git a/src/components/detail/List.tsx b/src/components/detail/List.tsx
index 950b2997..0ed20d00 100644
--- a/src/components/detail/List.tsx
+++ b/src/components/detail/List.tsx
@@ -18,6 +18,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 export default function ListDetail(props: Props) {
@@ -169,6 +170,7 @@ export default function ListDetail(props: Props) {
                     openFromOtherAccount={props.openFromOtherAccount}
                     customEmojis={customEmojis}
                     filters={filters}
+                    locale={props.locale}
                   />
                 </List.Item>
               )}
diff --git a/src/components/detail/Profile.tsx b/src/components/detail/Profile.tsx
index ef97b325..4c2ac7ad 100644
--- a/src/components/detail/Profile.tsx
+++ b/src/components/detail/Profile.tsx
@@ -27,6 +27,7 @@ type Props = {
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
   openAddListMember: (user: Entity.Account, client: MegalodonInterface) => void
+  locale: string
 }
 
 const Profile: React.FC<Props> = props => {
@@ -163,6 +164,7 @@ const Profile: React.FC<Props> = props => {
             openMedia={props.openMedia}
             openReport={props.openReport}
             openFromOtherAccount={props.openFromOtherAccount}
+            locale={props.locale}
             ref={postsRef}
           />
         )
diff --git a/src/components/detail/Status.tsx b/src/components/detail/Status.tsx
index c2d7ed7f..2406812c 100644
--- a/src/components/detail/Status.tsx
+++ b/src/components/detail/Status.tsx
@@ -17,6 +17,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 const StatusDetail: React.FC<Props> = props => {
@@ -179,6 +180,7 @@ const StatusDetail: React.FC<Props> = props => {
                   openReport={props.openReport}
                   openFromOtherAccount={props.openFromOtherAccount}
                   customEmojis={customEmojis}
+                  locale={props.locale}
                 />
               </List.Item>
             ))}
diff --git a/src/components/detail/Tag.tsx b/src/components/detail/Tag.tsx
index 3fa431b3..a6e7cce1 100644
--- a/src/components/detail/Tag.tsx
+++ b/src/components/detail/Tag.tsx
@@ -18,6 +18,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 export default function TagDetail(props: Props) {
@@ -201,6 +202,7 @@ export default function TagDetail(props: Props) {
                     openReport={props.openReport}
                     openFromOtherAccount={props.openFromOtherAccount}
                     customEmojis={customEmojis}
+                    locale={props.locale}
                   />
                 </List.Item>
               )}
diff --git a/src/components/detail/profile/Posts.tsx b/src/components/detail/profile/Posts.tsx
index 0bd81580..e395c20c 100644
--- a/src/components/detail/profile/Posts.tsx
+++ b/src/components/detail/profile/Posts.tsx
@@ -21,6 +21,7 @@ type ArgProps = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref) => {
@@ -122,6 +123,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
                 openReport={props.openReport}
                 openFromOtherAccount={props.openFromOtherAccount}
                 customEmojis={customEmojis}
+                locale={props.locale}
               />
             </List.Item>
           ))}
@@ -140,6 +142,7 @@ const Posts: React.ForwardRefRenderFunction<FuncProps, ArgProps> = (props, ref)
                 openReport={props.openReport}
                 openFromOtherAccount={props.openFromOtherAccount}
                 customEmojis={customEmojis}
+                locale={props.locale}
               />
             </List.Item>
           ))}
diff --git a/src/components/fromOtherAccount/FromOtherAccount.tsx b/src/components/fromOtherAccount/FromOtherAccount.tsx
index 25221edc..594cbac3 100644
--- a/src/components/fromOtherAccount/FromOtherAccount.tsx
+++ b/src/components/fromOtherAccount/FromOtherAccount.tsx
@@ -12,6 +12,7 @@ type Props = {
   opened: boolean
   status: Entity.Status
   close: () => void
+  locale: string
 }
 
 export default function FromOtherAccount(props: Props) {
@@ -54,6 +55,7 @@ export default function FromOtherAccount(props: Props) {
             reset()
             props.close()
           }}
+          locale={props.locale}
         />
       )
     }
diff --git a/src/components/fromOtherAccount/Status.tsx b/src/components/fromOtherAccount/Status.tsx
index f75c0dc6..af580f8c 100644
--- a/src/components/fromOtherAccount/Status.tsx
+++ b/src/components/fromOtherAccount/Status.tsx
@@ -20,6 +20,7 @@ type Props = {
   account: Account
   client: MegalodonInterface | null
   next: () => void
+  locale: string
 }
 export default function Status(props: Props) {
   const [statuses, setStatuses] = useState<Array<Entity.Status>>([])
@@ -90,6 +91,7 @@ export default function Status(props: Props) {
                 server={props.server}
                 account={props.account}
                 customEmojis={customEmojis}
+                locale={props.locale}
               />
             ))
           ) : (
@@ -115,6 +117,7 @@ type PostProps = {
   client: MegalodonInterface
   updateStatus: (status: Entity.Status) => void
   customEmojis: Array<CustomEmojiCategory>
+  locale: string
 }
 
 function Post(props: PostProps) {
@@ -173,6 +176,7 @@ function Post(props: PostProps) {
               setShowReply={setShowReply}
               updateStatus={props.updateStatus}
               customEmojis={props.customEmojis}
+              locale={props.locale}
             />
           </div>
         </FlexboxGrid.Item>
diff --git a/src/components/search/Results.tsx b/src/components/search/Results.tsx
index c49835be..afd936fd 100644
--- a/src/components/search/Results.tsx
+++ b/src/components/search/Results.tsx
@@ -19,6 +19,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 export default function Results(props: Props) {
@@ -184,6 +185,7 @@ export default function Results(props: Props) {
                     openReport={props.openReport}
                     openFromOtherAccount={props.openFromOtherAccount}
                     customEmojis={customEmojis}
+                    locale={props.locale}
                   />
                 </div>
               </List.Item>
diff --git a/src/components/search/Search.tsx b/src/components/search/Search.tsx
index 73a8b42f..45615127 100644
--- a/src/components/search/Search.tsx
+++ b/src/components/search/Search.tsx
@@ -17,6 +17,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 export default function Search(props: Props) {
@@ -87,6 +88,7 @@ export default function Search(props: Props) {
             openMedia={props.openMedia}
             openReport={props.openReport}
             openFromOtherAccount={props.openFromOtherAccount}
+            locale={props.locale}
           />
         )}
       </Content>
diff --git a/src/components/timelines/Notifications.tsx b/src/components/timelines/Notifications.tsx
index 47b6c187..16be44cb 100644
--- a/src/components/timelines/Notifications.tsx
+++ b/src/components/timelines/Notifications.tsx
@@ -46,6 +46,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 const Notifications: React.FC<Props> = props => {
@@ -404,6 +405,7 @@ const Notifications: React.FC<Props> = props => {
                         openFromOtherAccount={props.openFromOtherAccount}
                         customEmojis={customEmojis}
                         filters={filters}
+                        locale={props.locale}
                       />
                     </List.Item>
                   )
diff --git a/src/components/timelines/Show.tsx b/src/components/timelines/Show.tsx
index c81f8d01..a0a235ad 100644
--- a/src/components/timelines/Show.tsx
+++ b/src/components/timelines/Show.tsx
@@ -14,6 +14,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 const Show: React.FC<Props> = props => {
@@ -27,6 +28,7 @@ const Show: React.FC<Props> = props => {
         openMedia={props.openMedia}
         openReport={props.openReport}
         openFromOtherAccount={props.openFromOtherAccount}
+        locale={props.locale}
       />
     )
   } else if (props.timeline.kind === 'direct') {
@@ -39,6 +41,7 @@ const Show: React.FC<Props> = props => {
         openMedia={props.openMedia}
         openReport={props.openReport}
         openFromOtherAccount={props.openFromOtherAccount}
+        locale={props.locale}
       />
     )
   }
diff --git a/src/components/timelines/Timeline.tsx b/src/components/timelines/Timeline.tsx
index 7c1706b9..1b37a761 100644
--- a/src/components/timelines/Timeline.tsx
+++ b/src/components/timelines/Timeline.tsx
@@ -64,6 +64,7 @@ type Props = {
   openMedia: (media: Array<Entity.Attachment>, index: number) => void
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
+  locale: string
 }
 
 export default function TimelineColumn(props: Props) {
@@ -535,6 +536,7 @@ export default function TimelineColumn(props: Props) {
                       openFromOtherAccount={props.openFromOtherAccount}
                       customEmojis={customEmojis}
                       filters={filters}
+                      locale={props.locale}
                     />
                   </List.Item>
                 )}
diff --git a/src/components/timelines/notification/Notification.tsx b/src/components/timelines/notification/Notification.tsx
index abc3ef4f..32e35598 100644
--- a/src/components/timelines/notification/Notification.tsx
+++ b/src/components/timelines/notification/Notification.tsx
@@ -24,6 +24,7 @@ type Props = {
   openFromOtherAccount: (status: Entity.Status) => void
   customEmojis: Array<CustomEmojiCategory>
   filters: Array<Entity.Filter>
+  locale: string
 }
 
 const notification = (props: Props) => {
@@ -67,6 +68,7 @@ const notification = (props: Props) => {
             openReport={props.openReport}
             openFromOtherAccount={props.openFromOtherAccount}
             customEmojis={props.customEmojis}
+            locale={props.locale}
           />
         )
       } else {
@@ -91,6 +93,7 @@ const notification = (props: Props) => {
             openFromOtherAccount={props.openFromOtherAccount}
             customEmojis={props.customEmojis}
             filters={props.filters}
+            locale={props.locale}
           />
         )
       } else {
diff --git a/src/components/timelines/notification/Reaction.tsx b/src/components/timelines/notification/Reaction.tsx
index cf171d82..25419481 100644
--- a/src/components/timelines/notification/Reaction.tsx
+++ b/src/components/timelines/notification/Reaction.tsx
@@ -30,6 +30,7 @@ type Props = {
   openReport: (status: Entity.Status, client: MegalodonInterface) => void
   openFromOtherAccount: (status: Entity.Status) => void
   customEmojis: Array<CustomEmojiCategory>
+  locale: string
 }
 
 const actionIcon = (notification: Entity.Notification) => {
@@ -315,6 +316,7 @@ const Reaction: React.FC<Props> = props => {
             openReport={() => props.openReport(status, props.client)}
             openFromOtherAccount={() => props.openFromOtherAccount(status)}
             customEmojis={props.customEmojis}
+            locale={props.locale}
           />
         </div>
       </div>
diff --git a/src/components/timelines/status/Actions.tsx b/src/components/timelines/status/Actions.tsx
index c73e7bf7..66c132a4 100644
--- a/src/components/timelines/status/Actions.tsx
+++ b/src/components/timelines/status/Actions.tsx
@@ -48,6 +48,7 @@ type Props = {
   openReport?: () => void
   openFromOtherAccount?: () => void
   customEmojis: Array<CustomEmojiCategory>
+  locale: string
 }
 
 const Actions: React.FC<Props> = props => {
@@ -125,6 +126,8 @@ const Actions: React.FC<Props> = props => {
     props.updateStatus(res.data)
   }
 
+  const simpleLocale = props.locale ? props.locale.split('-')[0] : 'en'
+
   const onEmojiSelect = async emoji => {
     let name = emoji.name
     if (emoji.native) {
@@ -146,6 +149,7 @@ const Actions: React.FC<Props> = props => {
         set="native"
         perLine="6"
         theme={theme === 'high-contrast' ? 'dark' : theme}
+        locale={simpleLocale}
       />
     </Popover>
   ))
diff --git a/src/components/timelines/status/Status.tsx b/src/components/timelines/status/Status.tsx
index 03a136a9..3a11cc97 100644
--- a/src/components/timelines/status/Status.tsx
+++ b/src/components/timelines/status/Status.tsx
@@ -35,6 +35,7 @@ type Props = {
   openFromOtherAccount: (status: Entity.Status) => void
   customEmojis: Array<CustomEmojiCategory>
   filters?: Array<Entity.Filter>
+  locale: string
 } & HTMLAttributes<HTMLElement>
 
 const Status: React.FC<Props> = props => {
@@ -229,6 +230,7 @@ const Status: React.FC<Props> = props => {
             openReport={() => props.openReport(status, props.client)}
             openFromOtherAccount={() => props.openFromOtherAccount(status)}
             customEmojis={props.customEmojis}
+            locale={props.locale}
           />
         </div>
       </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0b9a11e1..4bbc6970 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -44,6 +44,7 @@ function App() {
   const [searchOpened, setSearchOpened] = useState<boolean>(false)
   const [style, setStyle] = useState<CSSProperties>({})
   const [highlighted, setHighlighted] = useState<Timeline | null>(null)
+  const [locale, setLocale] = useState<string>('en')
 
   const [modalState, dispatch] = useReducer(modalReducer, initialModalState)
   const spaceRef = useRef<HTMLDivElement>()
@@ -155,6 +156,7 @@ function App() {
       })
       switchLang(res.appearance.language)
       dayjs.locale(res.appearance.language)
+      setLocale(res.appearance.language)
       document.documentElement.setAttribute('lang', res.appearance.language)
     })
   }
@@ -209,6 +211,7 @@ function App() {
       <FromOtherAccount
         opened={modalState.fromOtherAccount.opened}
         status={modalState.fromOtherAccount.object}
+        locale={locale}
         close={() => dispatch({ target: 'fromOtherAccount', value: false, object: null })}
       />
       {modalState.announcements.object && (
@@ -274,6 +277,7 @@ function App() {
               <Search
                 setOpened={setSearchOpened}
                 servers={servers}
+                locale={locale}
                 openMedia={(media: Array<Entity.Attachment>, index: number) =>
                   dispatch({ target: 'media', value: true, object: media, index: index })
                 }
@@ -293,6 +297,7 @@ function App() {
               unreads={unreads}
               setUnreads={setUnreads}
               key={timeline[0].id}
+              locale={locale}
               openMedia={(media: Array<Entity.Attachment>, index: number) =>
                 dispatch({ target: 'media', value: true, object: media, index: index })
               }
@@ -306,6 +311,7 @@ function App() {
         </Content>
         <Detail
           dispatch={dispatch}
+          locale={locale}
           openMedia={(media: Array<Entity.Attachment>, index: number) =>
             dispatch({ target: 'media', value: true, object: media, index: index })
           }

From d3247eece2387ec08b28339561dbd536c4760d79 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 6 Jul 2024 00:21:13 +0900
Subject: [PATCH 2/2] Fix locale in compose emoji picker

---
 src/components/compose/Compose.tsx             |  2 ++
 src/components/compose/Status.tsx              |  4 ++++
 src/components/fromOtherAccount/Status.tsx     |  9 ++++++++-
 .../timelines/notification/Reaction.tsx        |  2 ++
 src/components/timelines/status/Status.tsx     | 18 ++++++++++++++++--
 src/pages/index.tsx                            |  2 +-
 6 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/src/components/compose/Compose.tsx b/src/components/compose/Compose.tsx
index c5dcc60d..4b035efc 100644
--- a/src/components/compose/Compose.tsx
+++ b/src/components/compose/Compose.tsx
@@ -39,6 +39,7 @@ export const renderAccountIcon = (props: any, ref: any, account: [Account, Serve
 type Props = {
   setOpened: (value: boolean) => void
   servers: Array<ServerSet>
+  locale: string
 }
 
 const Compose: React.FC<Props> = props => {
@@ -127,6 +128,7 @@ const Compose: React.FC<Props> = props => {
             defaultVisibility={defaultVisibility}
             defaultNSFW={defaultNSFW}
             defaultLanguage={defaultLanguage}
+            locale={props.locale}
           />
         )}
       </Content>
diff --git a/src/components/compose/Status.tsx b/src/components/compose/Status.tsx
index 30d12270..4365f490 100644
--- a/src/components/compose/Status.tsx
+++ b/src/components/compose/Status.tsx
@@ -56,6 +56,7 @@ type Props = {
   defaultNSFW?: boolean
   defaultLanguage?: string | null
   onClose?: () => void
+  locale: string
 }
 
 type FormValue = {
@@ -425,6 +426,8 @@ const Status: React.FC<Props> = props => {
     setFormValue(current => Object.assign({}, current, { spoiler: '' }))
   }
 
+  const simpleLocale = props.locale ? props.locale.split('-')[0] : 'en'
+
   const EmojiPicker = forwardRef<HTMLDivElement>((props, ref) => (
     <Popover ref={ref} {...props}>
       <Picker
@@ -435,6 +438,7 @@ const Status: React.FC<Props> = props => {
         set="native"
         perLine="7"
         theme={theme === 'high-contrast' ? 'dark' : theme}
+        locale={simpleLocale}
       />
     </Popover>
   ))
diff --git a/src/components/fromOtherAccount/Status.tsx b/src/components/fromOtherAccount/Status.tsx
index af580f8c..e6f62c72 100644
--- a/src/components/fromOtherAccount/Status.tsx
+++ b/src/components/fromOtherAccount/Status.tsx
@@ -183,7 +183,14 @@ function Post(props: PostProps) {
       </FlexboxGrid>
       {showReply && (
         <div style={{ padding: '8px 12px' }}>
-          <Reply client={client} server={props.server} account={props.account} in_reply_to={status} onClose={() => setShowReply(false)} />
+          <Reply
+            client={client}
+            server={props.server}
+            account={props.account}
+            in_reply_to={status}
+            onClose={() => setShowReply(false)}
+            locale={props.locale}
+          />
         </div>
       )}
     </>
diff --git a/src/components/timelines/notification/Reaction.tsx b/src/components/timelines/notification/Reaction.tsx
index 25419481..43247a76 100644
--- a/src/components/timelines/notification/Reaction.tsx
+++ b/src/components/timelines/notification/Reaction.tsx
@@ -328,6 +328,7 @@ const Reaction: React.FC<Props> = props => {
             account={props.account}
             in_reply_to={status}
             onClose={() => setShowReply(false)}
+            locale={props.locale}
           />
         </div>
       )}
@@ -339,6 +340,7 @@ const Reaction: React.FC<Props> = props => {
             account={props.account}
             edit_target={status}
             onClose={() => setShowEdit(false)}
+            locale={props.locale}
           />
         </div>
       )}
diff --git a/src/components/timelines/status/Status.tsx b/src/components/timelines/status/Status.tsx
index 3a11cc97..77853281 100644
--- a/src/components/timelines/status/Status.tsx
+++ b/src/components/timelines/status/Status.tsx
@@ -236,12 +236,26 @@ const Status: React.FC<Props> = props => {
       </div>
       {showReply && (
         <div style={{ padding: '8px 12px' }}>
-          <Reply client={client} server={props.server} account={props.account} in_reply_to={status} onClose={() => setShowReply(false)} />
+          <Reply
+            client={client}
+            server={props.server}
+            account={props.account}
+            in_reply_to={status}
+            onClose={() => setShowReply(false)}
+            locale={props.locale}
+          />
         </div>
       )}
       {showEdit && (
         <div style={{ padding: '8px 12px' }}>
-          <Reply client={client} server={props.server} account={props.account} edit_target={status} onClose={() => setShowEdit(false)} />
+          <Reply
+            client={client}
+            server={props.server}
+            account={props.account}
+            edit_target={status}
+            onClose={() => setShowEdit(false)}
+            locale={props.locale}
+          />
         </div>
       )}
     </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4bbc6970..6c9d17bf 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -261,7 +261,7 @@ function App() {
         >
           {(props, ref) => (
             <div {...props} ref={ref} style={{ overflow: 'hidden' }}>
-              <Compose setOpened={setComposeOpened} servers={servers} />
+              <Compose setOpened={setComposeOpened} servers={servers} locale={locale} />
             </div>
           )}
         </Animation.Transition>