feat: highlight active mutation and version switch (DAP-4814)

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

@@ -2,12 +2,8 @@ import { EntitySourceType } from '@mweb/backend'
 import { useMutableWeb } from '@mweb/engine'
 import { EventEmitter as NEventEmitter } from 'events'
 import React, { FC, useEffect, useRef, useState } from 'react'
-import Draggable from 'react-draggable'
 import styled from 'styled-components'
 import { NearNetworkId } from '../../common/networks'
-import { getIsPanelUnpinned, removePanelUnpinnedFlag, setPanelUnpinnedFlag } from '../storage'
-import { PinOutlineIcon, PinSolidIcon } from './assets/vectors'
-import { Dropdown } from './components/dropdown'
 import { MutationEditorModal } from './components/mutation-editor-modal'
 import MutableOverlayContainer from './mutable-overlay-container'
 
@@ -54,83 +50,16 @@ const WrapperPanel = styled.div<{ $isAnimated?: boolean }>`
   }
 `
 
-const Notch = styled.div<{ $isAnimated?: boolean; $isOpen?: boolean }>`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: none;
-  -webkit-overflow-scrolling: touch;
-
-  width: 318px;
-  height: 45px;
-  border-radius: ${(props) => (props.$isOpen ? '0' : '0 0 6px 6px')};
-  background: #384bff;
-  box-shadow: 0 4px 5px rgb(45 52 60 / 10%), 0 4px 20px rgb(11 87 111 / 15%);
-  opacity: 0;
-  transform: translateY(-100%);
-  transition: ${(props) =>
-    props.$isAnimated ? 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out' : 'initial'};
-
-  justify-content: space-between;
-  padding: 4px 5px;
-  padding-top: 0;
-`
-
-const NotchButtonWrapper = styled.div`
-  width: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    opacity: 0.5;
-  }
-`
-
-const IconWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-`
-
-const DragIcon = () => (
-  <svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect y="0.75" width="8" height="1.5" rx="0.75" fill="white" />
-    <rect y="4.25" width="8" height="1.5" rx="0.75" fill="white" />
-    <rect y="7.75" width="8" height="1.5" rx="0.75" fill="white" />
-  </svg>
-)
-
 interface MultitablePanelProps {
   eventEmitter: NEventEmitter
 }
 
 export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
   const { mutations, allApps, selectedMutation, config } = useMutableWeb()
   const [isOverlayOpened, setIsOverlayOpened] = useState(false)
-  const [isPin, setPin] = useState(!getIsPanelUnpinned())
-  const [isDragging, setIsDragging] = useState(false)
-  const [isNotchDisplayed, setIsNotchDisplayed] = useState(true)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const notchRef = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsNotchDisplayed(false)
-    }, 5000)
-
-    return () => clearTimeout(timer)
-  }, [isPin])
-
   useEffect(() => {
     const openMutationPopupCallback = () => {
       setIsModalOpen(true)
@@ -141,23 +70,6 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
     }
   }, [eventEmitter])
 
-  const handleStartDrag = () => {
-    setIsDragging(true)
-  }
-
-  const handleStopDrag = () => {
-    setIsDragging(false)
-  }
-
-  const handlePin = () => {
-    if (isPin) {
-      setPanelUnpinnedFlag('unpin')
-    } else {
-      removePanelUnpinnedFlag()
-    }
-    setPin(!isPin)
-  }
-
   const handleMutateButtonClick = () => {
     setIsModalOpen(true)
     setIsOverlayOpened(false)
@@ -180,56 +92,15 @@ export const MultitablePanel: FC<MultitablePanelProps> = ({ eventEmitter }) => {
         open={isOverlayOpened}
         handleMutateButtonClick={handleMutateButtonClick}
       />
-      <WrapperPanel $isAnimated={!isDragging} data-testid="mutation-panel">
+      <WrapperPanel $isAnimated={false} data-testid="mutation-panel">
         {isModalOpen ? (
           <MutationEditorModal
             apps={allApps}
             baseMutation={selectedMutation}
             localMutations={mutations.filter((m) => m.source === EntitySourceType.Local)}
             onClose={handleModalClose}
           />
-        ) : (
-          <Draggable
-            axis="x"
-            bounds="parent"
-            handle=".dragWrapper"
-            nodeRef={notchRef}
-            onStart={handleStartDrag}
-            onStop={handleStopDrag}
-            defaultPosition={{ x: window.innerWidth / 2 - 159, y: 0 }}
-          >
-            <Notch
-              data-testid="notch"
-              data-mweb-context-type="notch"
-              data-mweb-context-parsed={JSON.stringify({ id: 'notch' })}
-              data-mweb-context-level="system"
-              className={
-                isPin
-                  ? 'visible-pin'
-                  : isNotchDisplayed || isOverlayOpened || isDragging
-                  ? 'visible-default'
-                  : 'visible-notch'
-              }
-              $isAnimated={!isDragging}
-              $isOpen={isOverlayOpened}
-              ref={notchRef}
-            >
-              <NotchButtonWrapper className="dragWrapper">
-                <IconWrapper>
-                  <DragIcon />
-                </IconWrapper>
-              </NotchButtonWrapper>
-              <Dropdown
-                isVisible={isOverlayOpened}
-                onVisibilityChange={setIsOverlayOpened}
-                onMutateButtonClick={handleMutateButtonClick}
-              />
-              <NotchButtonWrapper onClick={handlePin}>
-                <IconWrapper>{isPin ? <PinSolidIcon /> : <PinOutlineIcon />}</IconWrapper>
-              </NotchButtonWrapper>
-            </Notch>
-          </Draggable>
-        )}
+        ) : null}
       </WrapperPanel>
     </>
   )

libs/shared-components/src/mini-overlay/assets/icons/icon-dropdown.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const IconDropdown = () => (
+  <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.5">
+      <path
+        d="M3.25 4.875L6.5 8.125L9.75 4.875"
+        stroke="#fff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+)
+
+export default IconDropdown

libs/shared-components/src/mini-overlay/assets/icons/index.ts

@@ -13,6 +13,7 @@ import OpenOverlay from './open-overlay'
 import OpenOverlayWithCircle from './open-overlay-with-circle'
 import Logo from './logo'
 import PersonAddAlt from './person-add-alt'
+import IconDropdown from './icon-dropdown'
 
 export {
   MutationFallbackIcon,
@@ -30,4 +31,5 @@ export {
   OpenOverlayWithCircle,
   Logo,
   PersonAddAlt,
+  IconDropdown,
 }