first commit

src/component/Dialogs/SelectOption.tsx

@@ -0,0 +1,67 @@
+import { useTranslation } from "react-i18next";
+import { DialogContent, List, ListItemButton, ListItemText } from "@mui/material";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks.ts";
+import React, { useCallback } from "react";
+import DraggableDialog from "./DraggableDialog.tsx";
+import { selectOptionDialogPromisePool } from "../../redux/thunks/dialog.ts";
+import { closeSelectOptionDialog } from "../../redux/globalStateSlice.ts";
+
+const SelectOption = () => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const open = useAppSelector((state) => state.globalState.selectOptionDialogOpen);
+  const title = useAppSelector((state) => state.globalState.selectOptionTitle);
+  const promiseId = useAppSelector((state) => state.globalState.selectOptionPromiseId);
+  const options = useAppSelector((state) => state.globalState.selectOptionDialogOptions);
+
+  const onClose = useCallback(() => {
+    dispatch(closeSelectOptionDialog());
+    if (promiseId) {
+      selectOptionDialogPromisePool[promiseId]?.reject("cancel");
+    }
+  }, [dispatch, promiseId]);
+
+  const onAccept = useCallback(
+    (v: any) => {
+      dispatch(closeSelectOptionDialog());
+      if (promiseId) {
+        selectOptionDialogPromisePool[promiseId]?.resolve(v);
+      }
+    },
+    [promiseId],
+  );
+
+  return (
+    <DraggableDialog
+      title={t(title ?? "")}
+      dialogProps={{
+        open: open ?? false,
+        onClose: onClose,
+        maxWidth: "sm",
+      }}
+    >
+      <DialogContent>
+        <List component="nav">
+          {options?.map((o) => (
+            <ListItemButton key={o.value} onClick={() => onAccept(o.value)}>
+              <ListItemText
+                primary={o.name}
+                secondary={o.description}
+                slotProps={{
+                  primary: {
+                    variant: "body2",
+                    fontWeight: "bold",
+                  },
+
+                  secondary: { variant: "body2" },
+                }}
+              />
+            </ListItemButton>
+          ))}
+        </List>
+      </DialogContent>
+    </DraggableDialog>
+  );
+};
+export default SelectOption;