feat: move mutation selector to overlay (DAP-4798) [WIP]

apps/extension/src/contentscript/multitable-panel/components/dropdown.tsx

@@ -1,22 +1,5 @@
-import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo, useState } from 'react'
+import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo } from 'react'
 import {
-  AuthorMutation,
-  AvalibleArrowBlock,
-  AvalibleArrowLable,
-  AvalibleLable,
-  AvalibleLableBlock,
-  AvalibleMutations,
-  ButtonBack,
-  ButtonListBlock,
-  ButtonMutation,
-  ImageBlock,
-  InputBlock,
-  InputIconWrapper,
-  InputInfoWrapper,
-  InputMutation,
-  ListMutations,
-  MutationsList,
-  MutationsListWrapper,
   OpenList,
   OpenListDefault,
   SelectedMutationBlock,
@@ -26,65 +9,26 @@ import {
   StarSelectedMutationWrapper,
   WrapperDropdown,
 } from '../assets/styles-dropdown'
-import {
-  AvailableIcon,
-  Back,
-  IconDropdown,
-  Mutate,
-  StarMutationList,
-  StarMutationListDefault,
-  StarSelectMutation,
-  StarSelectMutationDefault,
-} from '../assets/vectors'
-
-import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine'
-import { EntitySourceType, MutationWithSettings } from '@mweb/backend'
-import defaultIcon from '../assets/images/default.svg'
-import { Image } from './image'
+import { IconDropdown, StarSelectMutation, StarSelectMutationDefault } from '../assets/vectors'
+import { useMutableWeb } from '@mweb/engine'
+import { EntitySourceType } from '@mweb/backend'
 import { Badge } from './badge'
-import { ArrowDownOutlined, DeleteOutlined, EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'
-import styled from 'styled-components'
-import { ModalDelete } from './modal-delete'
-
-const ModalConfirmBackground = styled.div`
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  min-height: 190px;
-  top: 0;
-  left: 0;
-  background-color: rgba(255, 255, 255, 0.7);
-  border-radius: inherit;
-  z-index: 1;
-`
+import { EyeFilled, EyeInvisibleFilled } from '@ant-design/icons'
 
 export type DropdownProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
   isVisible: boolean
   onVisibilityChange: (visible: boolean) => void
-  onMutateButtonClick: () => void
 }
 
-export const Dropdown: FC<DropdownProps> = ({
-  isVisible,
-  onVisibilityChange,
-  onMutateButtonClick,
-}: DropdownProps) => {
+export const Dropdown: FC<DropdownProps> = ({ isVisible, onVisibilityChange }: DropdownProps) => {
   const {
     mutations,
     selectedMutation,
     favoriteMutationId,
     setFavoriteMutation,
-    switchMutation,
     switchPreferredSource,
-    getPreferredSource,
-    removeMutationFromRecents,
   } = useMutableWeb()
 
-  const { deleteLocalMutation } = useDeleteLocalMutation()
-
   const recentlyUsedMutations = useMemo(
     () =>
       Object.groupBy(
@@ -104,25 +48,6 @@ export const Dropdown: FC<DropdownProps> = ({
     [mutations]
   )
 
-  const [isAccordeonExpanded, setIsAccordeonExpanded] = useState(
-    Object.keys(recentlyUsedMutations).length === 0
-  )
-  const [mutationIdToDelete, setMutationIdToDelete] = useState<string | null>(null)
-
-  const unusedMutations = useMemo(
-    () =>
-      Object.groupBy(
-        mutations.filter((mut) => !mut.settings.lastUsage),
-        (mut) => mut.id
-      ),
-    [mutations]
-  )
-
-  const handleMutationClick = (mutationId: string) => {
-    onVisibilityChange(false)
-    switchMutation(mutationId)
-  }
-
   const handleSwitchSourceClick: React.MouseEventHandler<HTMLSpanElement> = (e) => {
     e.stopPropagation() // do not open dropdown
 
@@ -136,29 +61,10 @@ export const Dropdown: FC<DropdownProps> = ({
     switchPreferredSource(selectedMutation.id, source)
   }
 
-  // todo: mock
-  const handleAccordeonClick = () => {
-    setIsAccordeonExpanded((val) => !val)
-  }
-
-  const handleMutateButtonClick = () => {
-    onVisibilityChange(false)
-    onMutateButtonClick()
-  }
-
   const handleFavoriteButtonClick = (mutationId: string) => {
     setFavoriteMutation(mutationId === favoriteMutationId ? null : mutationId)
   }
 
-  const handleOriginalButtonClick = async () => {
-    onVisibilityChange(false)
-    switchMutation(null)
-  }
-
-  const handleRemoveFromRecentlyUsedClick = async (mut: MutationWithSettings) => {
-    removeMutationFromRecents(mut.id)
-  }
-
   return (
     <WrapperDropdown>
       <SelectedMutationBlock
@@ -220,169 +126,6 @@ export const Dropdown: FC<DropdownProps> = ({
           </OpenListDefault>
         )}
       </SelectedMutationBlock>
-
-      {isVisible && (
-        <MutationsList>
-          <ButtonListBlock>
-            <ButtonBack onClick={handleOriginalButtonClick}>{<Back />} to Original</ButtonBack>
-            <ButtonMutation
-              onClick={handleMutateButtonClick}
-              data-testid="mutate-button"
-              data-mweb-context-type="notch"
-              data-mweb-context-parsed={JSON.stringify({ id: 'mutate-button' })}
-              data-mweb-context-level="system"
-            >
-              Mutate {<Mutate />}
-              <div data-mweb-insertion-point="hidden" style={{ display: 'none' }}></div>
-            </ButtonMutation>
-          </ButtonListBlock>
-          <MutationsListWrapper>
-            {Object.keys(recentlyUsedMutations).length > 0 ? (
-              <ListMutations
-                data-testid="recently-used-mutations"
-                data-mweb-context-type="notch"
-                data-mweb-context-parsed={JSON.stringify({ id: 'recently-used-mutations' })}
-                data-mweb-context-level="system"
-              >
-                {Object.values(recentlyUsedMutations).map((muts) => {
-                  if (!muts || !muts.length) return null
-                  const recentlyUsedSource = getPreferredSource(muts[0].id)
-                  const mut =
-                    muts.find(
-                      (mut) => mut.source === (recentlyUsedSource ?? EntitySourceType.Local)
-                    ) ?? muts[0]
-                  return (
-                    <InputBlock key={mut.id} isActive={mut.id === selectedMutation?.id}>
-                      <ImageBlock>
-                        <Image image={mut.metadata.image} fallbackUrl={defaultIcon} />
-                      </ImageBlock>
-                      <InputInfoWrapper onClick={() => handleMutationClick(mut.id)}>
-                        {/* todo: mocked classname */}
-                        <InputMutation
-                          className={mut.id === selectedMutation?.id ? 'inputMutationSelected' : ''}
-                        >
-                          {mut.metadata ? mut.metadata.name : ''}{' '}
-                          {recentlyUsedMutations[mut.id]?.length === 2 ? (
-                            mut.source === EntitySourceType.Local ? (
-                              <Badge margin="0 0 0 4px" text="local on" theme="blue" />
-                            ) : (
-                              <Badge margin="0 0 0 4px" text="local off" theme="yellow" />
-                            )
-                          ) : mut.source === EntitySourceType.Local ? (
-                            <Badge margin="0 0 0 4px" text="local" theme="blue" />
-                          ) : null}
-                        </InputMutation>
-                        {/* todo: mocked classname */}
-                        {mut.authorId ? (
-                          <AuthorMutation
-                            className={
-                              mut.id === selectedMutation?.id && mut.id === favoriteMutationId
-                                ? 'authorMutationSelected'
-                                : ''
-                            }
-                          >
-                            by {mut.authorId}
-                          </AuthorMutation>
-                        ) : null}
-                      </InputInfoWrapper>
-                      {/* todo: mocked */}
-
-                      {mut.id === favoriteMutationId ? (
-                        <InputIconWrapper onClick={() => handleFavoriteButtonClick(mut.id)}>
-                          <StarMutationList />
-                        </InputIconWrapper>
-                      ) : mut.id === selectedMutation?.id ? (
-                        <InputIconWrapper onClick={() => handleFavoriteButtonClick(mut.id)}>
-                          <StarMutationListDefault />
-                        </InputIconWrapper>
-                      ) : null}
-
-                      {mut.source === EntitySourceType.Local ? (
-                        <InputIconWrapper onClick={() => setMutationIdToDelete(mut.id)}>
-                          <DeleteOutlined />
-                        </InputIconWrapper>
-                      ) : mut.id !== selectedMutation?.id &&
-                        mut.id !== favoriteMutationId &&
-                        !getPreferredSource(mut.id) ? (
-                        <InputIconWrapper onClick={() => handleRemoveFromRecentlyUsedClick(mut)}>
-                          <ArrowDownOutlined />
-                        </InputIconWrapper>
-                      ) : null}
-                    </InputBlock>
-                  )
-                })}
-                <div
-                  data-mweb-insertion-point="recently-used-mutations"
-                  style={{ display: 'none' }}
-                ></div>
-              </ListMutations>
-            ) : null}
-
-            {Object.keys(unusedMutations).length > 0 ? (
-              <AvalibleMutations>
-                <AvalibleLableBlock
-                  onClick={handleAccordeonClick}
-                  data-mweb-context-type="notch"
-                  data-mweb-context-parsed={JSON.stringify({ id: 'unused-mutations-title' })}
-                  data-mweb-context-level="system"
-                >
-                  <AvalibleLable>available</AvalibleLable>
-                  {/* todo: mock */}
-                  <AvalibleArrowBlock className={isAccordeonExpanded ? 'iconRotate' : ''}>
-                    <AvalibleArrowLable>
-                      {Object.keys(unusedMutations).length} mutations
-                    </AvalibleArrowLable>
-                    <AvailableIcon />
-                  </AvalibleArrowBlock>
-                  <div data-mweb-insertion-point="hidden" style={{ display: 'none' }}></div>
-                </AvalibleLableBlock>
-
-                {isAccordeonExpanded ? (
-                  <div data-testid="unused-mutations">
-                    {Object.values(unusedMutations).map((muts) => {
-                      if (!muts) return null
-                      const [mut] = muts
-
-                      return (
-                        <InputBlock
-                          key={mut.id}
-                          isActive={mut.id === selectedMutation?.id}
-                          onClick={() => handleMutationClick(mut.id)}
-                          className="avalibleMutationsInput"
-                        >
-                          <ImageBlock>
-                            <Image image={mut.metadata.image} fallbackUrl={defaultIcon} />
-                          </ImageBlock>
-                          <InputInfoWrapper>
-                            <InputMutation>{mut.metadata ? mut.metadata.name : ''}</InputMutation>
-                            {mut.authorId ? (
-                              <AuthorMutation>by {mut.authorId}</AuthorMutation>
-                            ) : null}
-                          </InputInfoWrapper>
-                        </InputBlock>
-                      )
-                    })}
-                  </div>
-                ) : null}
-              </AvalibleMutations>
-            ) : null}
-          </MutationsListWrapper>
-
-          {mutationIdToDelete && (
-            <ModalConfirmBackground>
-              <ModalDelete
-                onAction={async () => {
-                  await deleteLocalMutation(mutationIdToDelete)
-                  if (mutationIdToDelete === favoriteMutationId)
-                    handleFavoriteButtonClick(mutationIdToDelete)
-                  setMutationIdToDelete(null)
-                }}
-                onCloseCurrent={() => setMutationIdToDelete(null)}
-              />
-            </ModalConfirmBackground>
-          )}
-        </MutationsList>
-      )}
     </WrapperDropdown>
   )
 }

apps/extension/src/contentscript/multitable-panel/multitable-panel.tsx

@@ -191,7 +191,13 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
 
   return (
     <>
-      <MutableOverlayContainer notchRef={notchRef} networkId={config.networkId as NearNetworkId} />
+      <MutableOverlayContainer
+        notchRef={notchRef}
+        networkId={config.networkId as NearNetworkId}
+        setOpen={setIsDropdownVisible}
+        open={isDropdownVisible}
+        handleMutateButtonClick={handleMutateButtonClick}
+      />
       <WrapperPanel $isAnimated={!isDragging} data-testid="mutation-panel">
         {isModalOpen ? (
           <MutationEditorModal
@@ -230,11 +236,7 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
                   <DragIcon />
                 </DragIconWrapper>
               </DragWrapper>
-              <Dropdown
-                isVisible={isDropdownVisible}
-                onVisibilityChange={setIsDropdownVisible}
-                onMutateButtonClick={handleMutateButtonClick}
-              />
+              <Dropdown isVisible={isDropdownVisible} onVisibilityChange={setIsDropdownVisible} />
               <PinWrapper onClick={handlePin}>
                 {isPin ? <PinSolidIcon /> : <PinOutlineIcon />}
               </PinWrapper>

apps/extension/src/contentscript/multitable-panel/mutable-overlay-container.tsx

@@ -1,7 +1,7 @@
 import { useMutableWeb, useMutationApp } from '@mweb/engine'
 import { AppInstanceWithSettings } from '@mweb/backend'
 import { AppSwitcher, MiniOverlay } from '@mweb/shared-components'
-import React from 'react'
+import React, { useState } from 'react'
 import Background from '../../common/background'
 import { NearNetworkId } from '../../common/networks'
 
@@ -15,21 +15,30 @@ function AppSwitcherContainer({ app }: { app: AppInstanceWithSettings }) {
 function MutableOverlayContainer({
   notchRef,
   networkId,
+  setOpen,
+  open,
+  handleMutateButtonClick,
 }: {
   notchRef: React.RefObject<HTMLDivElement>
   networkId: NearNetworkId
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
+  open: boolean
+  handleMutateButtonClick: () => void
 }) {
   const { selectedMutation, mutationApps } = useMutableWeb()
   const trackingRefs = new Set<React.RefObject<HTMLDivElement>>()
   trackingRefs.add(notchRef)
   return (
     <MiniOverlay
+      setOpen={setOpen}
+      open={open}
       baseMutation={selectedMutation}
       mutationApps={mutationApps}
       nearNetwork={networkId}
       connectWallet={Background.connectWallet}
       disconnectWallet={Background.disconnectWallet}
       trackingRefs={trackingRefs}
+      handleMutateButtonClick={handleMutateButtonClick}
     >
       <>
         {mutationApps.map((app) => (

libs/shared-components/package.json

@@ -33,6 +33,7 @@
     "@uiw/codemirror-extensions-langs": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "antd": "^5.18.3",
+    "@ant-design/icons": "5.5.1",
     "codemirror": "^6.0.1",
     "ethereum-blockies-base64": "^1.0.2",
     "json-stringify-deterministic": "^1.0.12",