h

src/components/common/messaging/MessageBox.tsx

@@ -41,6 +41,7 @@ import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
 import owoify from "owoify-js";
 import { ExperimentOptions } from "../../../redux/reducers/experiments";
+import Button from "../../ui/Button";
 
 type Props = {
     channel: Channel;
@@ -114,6 +115,7 @@ export const CAN_UPLOAD_AT_ONCE = 4;
 
 export default observer(({ channel }: Props) => {
     const [draft, setDraft] = useState(getState().drafts[channel._id] ?? "");
+    let messageText = draft ?? "";
     const experiments = getState().experiments;
 
     const [uploadState, setUploadState] = useState<UploadState>({
@@ -409,6 +411,61 @@ export default observer(({ channel }: Props) => {
                 : undefined,
     });
 
+    const messageTextArea = <TextAreaAutoSize
+        autoFocus
+        hideBorder
+        maxRows={20}
+        id="message"
+        onKeyUp={onKeyUp}
+        value={messageText}
+        padding="var(--message-box-padding)"
+        onKeyDown={(e) => {
+            if (onKeyDown(e)) return;
+
+            if (
+                e.key === "ArrowUp" &&
+                (!draft || draft.length === 0)
+            ) {
+                e.preventDefault();
+                internalEmit("MessageRenderer", "edit_last");
+                return;
+            }
+
+            if (
+                !e.shiftKey &&
+                e.key === "Enter" &&
+                !isTouchscreenDevice
+            ) {
+                e.preventDefault();
+                return send();
+            }
+
+            debouncedStopTyping(true);
+        }}
+        placeholder={
+            channel.channel_type === "DirectMessage"
+                ? translate("app.main.channel.message_who", {
+                    person: channel.recipient?.username,
+                })
+                : channel.channel_type === "SavedMessages"
+                ? translate("app.main.channel.message_saved")
+                : translate("app.main.channel.message_where", {
+                    channel_name: channel.name,
+                })
+        }
+        disabled={
+            uploadState.type === "uploading" ||
+            uploadState.type === "sending"
+        }
+        onChange={(e) => {
+            setMessage(e.currentTarget.value);
+            startTyping();
+            onChange(e);
+        }}
+        onFocus={onFocus}
+        onBlur={onBlur}
+    />;
+
     return (
         <>
             <AutoComplete {...autoCompleteProps} />
@@ -486,13 +543,31 @@ export default observer(({ channel }: Props) => {
                         />
                     </Action>
                 ) : undefined}
+                {/*<Button onClick={() =>*/}
+                {/*    openScreen({*/}
+                {/*        id: "szuru_pop",*/}
+                {/*        callback: (value) => {*/}
+                {/*            setMessage(value)*/}
+                {/*            console.log("callback called")*/}
+
+                    {/*    if (*/}
+                    {/*        !e.shiftKey &&*/}
+                    {/*        e.key === "Enter" &&*/}
+                    {/*        !isTouchscreenDevice*/}
+                    {/*    ) {*/}
+                    {/*        e.preventDefault();*/}
+                    {/*        return send();*/}
+                    {/*    }*/}
+
+                    {/*    debouncedStopTyping(true);*/}
+                    {/*}}*/}
                 <TextAreaAutoSize
                     autoFocus
                     hideBorder
                     maxRows={20}
                     id="message"
                     onKeyUp={onKeyUp}
-                    value={draft ?? ""}
+                    value={messageText}
                     padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
                         if (onKeyDown(e)) return;

src/context/intermediate/Intermediate.tsx

@@ -68,6 +68,10 @@ export type Screen =
           defaultValue?: string;
           callback: (value: string) => Promise<void>;
       }
+    | {
+        id: "szuru_pop";
+        callback: (value: string) => Promise<void>;
+    }
     | {
           id: "onboarding";
           callback: (

src/context/intermediate/Popovers.tsx

@@ -14,6 +14,7 @@ import { PendingRequests } from "./popovers/PendingRequests";
 import { ServerIdentityModal } from "./popovers/ServerIdentityModal";
 import { UserPicker } from "./popovers/UserPicker";
 import { UserProfile } from "./popovers/UserProfile";
+import { SzuruPop } from "./popovers/SzuruPop";
 
 export default function Popovers() {
     const { screen } = useContext(IntermediateContext);
@@ -27,6 +28,8 @@ export default function Popovers() {
     switch (screen.id) {
         case "profile":
             return <UserProfile {...screen} onClose={onClose} />;
+        case "szuru_pop":
+            return <SzuruPop {...screen} onClose={onClose} />;
         case "user_picker":
             return <UserPicker {...screen} onClose={onClose} />;
         case "image_viewer":

src/redux/reducers/experiments.ts

@@ -4,6 +4,34 @@ export const EXPERIMENTS: { [key in Experiments]: { title: string, description:
     'search': {
         title: 'Search',
         description: 'Allows you to search for messages in channels.'
+    },
+    'owo': {
+        title: 'OwO',
+        description: 'OwOifwies ywour outgwoing mwessages.'
+    },
+    'uwu': {
+        title: 'UwU',
+        description: 'OwOifwies ywouw outgwoing mwessages ＼(＾▽＾)／'
+    },
+    'uvu': {
+        title: 'UvU',
+        description: 'OwOifwies ywouw owoutgwowoing mwessages ＼(＾▽＾)／'
+    },
+    'rainbow': {
+        title: 'Rainbow',
+        description: 'Turns your outgoing messages into a gay rainbow.'
+    },
+    'censor': {
+        title: 'Censor',
+        description: ''
+    },
+    'insane_asylum': {
+        title: 'Insane asylum',
+        description: 'JAN'
+    },
+    'light_insane_asylum': {
+        title: 'Insane asylum LITE',
+        description: 'Jan'
     }
 };