ReplyEditor: added language picker

src/timelines/ReplyEditor.tsx

@@ -27,11 +27,16 @@ import {
   People as PeopleIcon,
   ThreeP as ThreePIcon,
   ListAlt as ListAltIcon,
+  Visibility,
+  Translate,
 } from "@suid/icons-material";
 import type { Account } from "../accounts/stores";
 import tootComposers from "./TootComposer.module.css";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import BottomSheet from "../material/BottomSheet";
+import { useLanguage } from "../platform/i18n";
+import iso639_1 from "iso-639-1";
+import ChooseTootLang from "./ChooseTootLang";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
@@ -154,17 +159,19 @@ const TootVisibilityPickerDialog: Component<{
 const ReplyEditor: Component<{
   profile: Account;
   replyToDisplayName: string;
-  isTyping?: boolean
-  onTypingChange: (value: boolean) => void
+  isTyping?: boolean;
+  onTypingChange: (value: boolean) => void;
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
   const buttonId = createUniqueId();
   const menuId = createUniqueId();
 
-  const typing = () => props.isTyping
-  const setTyping = (v: boolean) => props.onTypingChange(v)
+  const typing = () => props.isTyping;
+  const setTyping = (v: boolean) => props.onTypingChange(v);
   const [visibility, setVisibility] = createSignal<TootVisibility>("public");
   const [permPicker, setPermPicker] = createSignal(false);
+  const [language, setLanguage] = createSignal(useLanguage()().split("-")[0]);
+  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
 
   onMount(() => {
     makeEventListener(inputRef, "focus", () => setTyping(true));
@@ -218,7 +225,13 @@ const ReplyEditor: Component<{
           "margin-top": "8px",
         }}
       >
+        <Button onClick={[setLangPickerOpen, true]}>
+          <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
+          {iso639_1.getNativeName(language())}
+          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+        </Button>
         <Button onClick={[setPermPicker, true]} id={buttonId}>
+          <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
           {visibilityText()}
           <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
         </Button>
@@ -230,6 +243,17 @@ const ReplyEditor: Component<{
         visibility={visibility()}
         onVisibilityChange={setVisibility}
       />
+
+      <BottomSheet
+        open={langPickerOpen()}
+        onClose={() => setLangPickerOpen(false)}
+      >
+        <ChooseTootLang
+          code={language()}
+          onCodeChange={setLanguage}
+          onClose={[setLangPickerOpen, false]}
+        />
+      </BottomSheet>
     </div>
   );
 };