init commit,

99_references/voyager-main/src/features/inbox/PrivateMessageMoreActions.tsx

@@ -0,0 +1,141 @@
+import {
+  arrowUndoOutline,
+  ellipsisHorizontal,
+  flagOutline,
+  personOutline,
+  removeCircleOutline,
+  textOutline,
+} from "ionicons/icons";
+import { ActionSheetButton, IonIcon, useIonActionSheet } from "@ionic/react";
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+} from "react";
+import { PageContext } from "../auth/PageContext";
+import useAppNavigation from "../../helpers/useAppNavigation";
+import { useUserDetails } from "../user/useUserDetails";
+import { getHandle } from "../../helpers/lemmy";
+import { PrivateMessageView } from "lemmy-js-client";
+import { styled } from "@linaria/react";
+import { markRead, syncMessages } from "./inboxSlice";
+import store, { useAppDispatch } from "../../store";
+
+const StyledIonIcon = styled(IonIcon)`
+  font-size: 1.2em;
+`;
+
+interface PrivateMessageMoreActionsHandle {
+  present: () => void;
+}
+
+interface PrivateMessageMoreActionsProps {
+  item: PrivateMessageView;
+  markReadAction: ActionSheetButton;
+}
+
+export default forwardRef<
+  PrivateMessageMoreActionsHandle,
+  PrivateMessageMoreActionsProps
+>(function PrivateMessageMoreActions({ item, markReadAction }, ref) {
+  const dispatch = useAppDispatch();
+  const [presentActionSheet] = useIonActionSheet();
+  const { presentReport, presentSelectText, presentPrivateMessageCompose } =
+    useContext(PageContext);
+
+  const { navigateToUser } = useAppNavigation();
+
+  const { isBlocked, blockOrUnblock } = useUserDetails(getHandle(item.creator));
+
+  const present = useCallback(() => {
+    presentActionSheet({
+      cssClass: "left-align-buttons",
+      buttons: [
+        markReadAction,
+        {
+          text: "Reply",
+          icon: arrowUndoOutline,
+          handler: () => {
+            (async () => {
+              await presentPrivateMessageCompose({
+                private_message: {
+                  recipient:
+                    item.private_message.creator_id ===
+                    store.getState().site.response?.my_user?.local_user_view
+                      ?.local_user?.person_id
+                      ? item.recipient
+                      : item.creator,
+                },
+              });
+
+              await dispatch(markRead(item, true));
+              dispatch(syncMessages());
+            })();
+          },
+        },
+        {
+          text: "Select Text",
+          icon: textOutline,
+          handler: () => {
+            presentSelectText(item.private_message.content);
+          },
+        },
+        {
+          text: getHandle(item.creator),
+          icon: personOutline,
+          handler: () => {
+            navigateToUser(item.creator);
+          },
+        },
+        {
+          text: "Report",
+          icon: flagOutline,
+          handler: () => {
+            presentReport(item);
+          },
+        },
+        {
+          text: !isBlocked ? "Block User" : "Unblock User",
+          icon: removeCircleOutline,
+          handler: () => {
+            blockOrUnblock();
+          },
+        },
+        {
+          text: "Cancel",
+          role: "cancel",
+        },
+      ],
+    });
+  }, [
+    presentActionSheet,
+    markReadAction,
+    item,
+    isBlocked,
+    presentPrivateMessageCompose,
+    dispatch,
+    presentSelectText,
+    navigateToUser,
+    presentReport,
+    blockOrUnblock,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      present,
+    }),
+    [present],
+  );
+
+  return (
+    <StyledIonIcon
+      icon={ellipsisHorizontal}
+      onClick={(e) => {
+        e.stopPropagation();
+        present();
+      }}
+    />
+  );
+});