Pass selected action to message component

src/components/Inbox/Message.module.scss

@@ -52,7 +52,7 @@ $actionsWidth: 32px * 2;
 
     &:hover {
       .actions {
-        z-index: 1;
+        z-index: 100;
         opacity: 1;
         right: -$actionsWidth;
       }

src/components/Inbox/Message.tsx

@@ -27,6 +27,7 @@ const Message = (props: Props) => {
   const isOwn = props.ownId === Number(props.content.author)
   const user = props.members?.find((m) => m.id === Number(props.content.author))
   const [isPopupVisible, setIsPopupVisible] = createSignal<boolean>(false)
+  const [selectedAction, setSelectedAction] = createSignal<string>()
 
   const handleMouseLeave = () => {
     if (isPopupVisible()) setIsPopupVisible(false)
@@ -48,6 +49,7 @@ const Message = (props: Props) => {
             </div>
             <MessageActionsPopup
               forceHide={!isPopupVisible()}
+              actionSelect={(selectedAction) => setSelectedAction(selectedAction)}
               onVisibilityChange={(isVisible) => setIsPopupVisible(isVisible)}
               trigger={<Icon name="menu" />}
             />

src/components/Inbox/MessageActionsPopup.tsx

@@ -1,18 +1,32 @@
+import { createEffect, createSignal, For } from 'solid-js'
 import type { PopupProps } from '../_shared/Popup'
 import { Popup } from '../_shared/Popup'
+import { t } from '../../utils/intl'
 
-type MessageActionsPopup = Omit<PopupProps, 'children'>
+type MessageActionsPopup = {
+  actionSelect?: (selectedAction) => void
+} & Omit<PopupProps, 'children'>
+
+const actions = [
+  { name: t('Reply'), action: 'reply' },
+  { name: t('Copy'), action: 'copy' },
+  { name: t('Pin'), action: 'pin' },
+  { name: t('Forward'), action: 'forward' },
+  { name: t('Select'), action: 'select' },
+  { name: t('Delete'), action: 'delete' }
+]
 
 export const MessageActionsPopup = (props: MessageActionsPopup) => {
+  const [selectedAction, setSelectedAction] = createSignal<string>()
+  createEffect(() => {
+    if (props.actionSelect) props.actionSelect(selectedAction())
+  })
   return (
     <Popup {...props} variant="tiny">
       <ul class="nodash">
-        <li>Ответить</li>
+        <For each={actions}>
-        <li>Скопировать</li>
+          {(item) => <li onClick={() => setSelectedAction(item.action)}>{item.name}</li>}
-        <li>Закрепить</li>
+        </For>
-        <li>Переслать</li>
-        <li>Выбрать</li>
-        <li style={{ color: 'red' }}>Удалить</li>
       </ul>
     </Popup>
   )

src/components/_shared/Popup/Popup.module.scss

@@ -8,7 +8,7 @@
   opacity: 1;
   color: #000;
   position: absolute;
-  z-index: 10;
+  z-index: 100;
   min-width: 144px;
 
   ul {

src/locales/ru.json

@@ -205,5 +205,11 @@
   "Date of Birth": "Дата рождения",
   "Social networks": "Социальные сети",
   "Save settings": "Сохранить настройки",
-  "Write message": "Написать сообщение"
+  "Write message": "Написать сообщение",
+  "Reply": "Ответить",
+  "Copy": "Скопировать",
+  "Pin": "Закрепить",
+  "Forward": "Переслать",
+  "Select": "Выбрать",
+  "Delete": "Удалить"
 }