Draggable Extension Sidebar Toggle

.changeset/real-bottles-wave.md

@@ -0,0 +1,5 @@
+---
+'mexit': patch
+---
+
+Draggable extension sidebar toggle

apps/extension/package.json

@@ -36,6 +36,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.37.0",
     "react-hot-toast": "^2.2.0",
+    "react-use-hoverintent": "^1.2.9",
     "react-spring": "^9.4.3",
     "react-virtual": "^2.10.4",
     "sanitize-html": "^2.6.1",
@@ -83,4 +84,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

apps/extension/src/Components/Sidebar/DraggableToggle.tsx

@@ -0,0 +1,140 @@
+import React, { useEffect, useRef, useState } from 'react'
+
+import { Icon } from '@iconify/react'
+import Tippy from '@tippyjs/react'
+import { useHoverIntent } from 'react-use-hoverintent'
+import styled, { css } from 'styled-components'
+
+import { TitleWithShortcut } from '@workduck-io/mex-components'
+
+import { mog } from '@mexit/core'
+import { MexIcon, WDLogo } from '@mexit/shared'
+
+import { useSidebarTransition } from '../../Hooks/useSidebarTransition'
+import { useLayoutStore } from '../../Stores/useLayoutStore'
+import { getElementById } from '../../contentScript'
+
+const DragIcon = styled(Icon)<{ $show: boolean }>`
+  ${(props) =>
+    !props.$show &&
+    css`
+      display: none;
+    `}
+`
+
+const ToggleWrapper = styled.div<{ $expanded?: boolean; $top: number }>`
+  position: fixed;
+  display: flex;
+  align-items: center;
+
+  ${({ $expanded, $top, theme }) =>
+    $expanded
+      ? css`
+          top: ${$top}px;
+          right: 405px;
+        `
+      : css`
+          top: ${$top}px;
+          right: 8px;
+        `}
+
+  z-index: 9999999999;
+  padding: 8px;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  background: ${({ theme }) => theme.colors.background.sidebar};
+  color: ${({ theme }) => theme.colors.text.fade};
+
+  svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
+    background: ${({ theme }) => theme.colors.primary};
+    color: ${({ theme }) => theme.colors.text.oppositePrimary};
+
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.background.sidebar};
+      }
+    }
+  }
+
+  ${DragIcon} {
+    cursor: ns-resize;
+  }
+
+  &:active {
+    transition: background 0.1s ease;
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: ${({ theme }) => theme.colors.text.oppositePrimary};
+  }
+`
+
+export const DraggableToggle = () => {
+  const [isHovering, intentRef, setIsHovering] = useHoverIntent({ timeout: 500 })
+  const [tracking, setTracking] = useState(false)
+  const { rhSidebar, toggleRHSidebar, toggleTop, setToggleTop } = useLayoutStore()
+  const { endColumnWidth } = useSidebarTransition()
+
+  const handleRef = useRef<any>(null)
+
+  useEffect(() => {
+    const handleMouseDown = (event: MouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      setTracking(true)
+    }
+
+    if (handleRef?.current) {
+      handleRef.current.addEventListener('mousedown', handleMouseDown)
+    }
+
+    return () => {
+      handleRef?.current?.removeEventListener('mousedown', handleMouseDown)
+    }
+  }, [handleRef?.current])
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (tracking) {
+        const newHeight = event.clientY
+        setToggleTop(newHeight)
+      }
+    }
+
+    window.addEventListener('mousemove', handleMouseMove)
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [tracking])
+
+  useEffect(() => {
+    const handleMouseUp = (event) => {
+      if (tracking) setTracking(false)
+    }
+    window.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [tracking])
+
+  return (
+    <Tippy
+      theme="mex-bright"
+      placement="left"
+      appendTo={() => getElementById('ext-side-nav')}
+      content={<TitleWithShortcut title={rhSidebar.expanded ? 'Collapse Sidebar' : 'Expand Sidebar'} />}
+    >
+      <ToggleWrapper ref={intentRef as any} $top={toggleTop} $expanded={rhSidebar.expanded} onClick={toggleRHSidebar}>
+        <WDLogo />
+
+        <DragIcon ref={handleRef} $show={isHovering} icon="ic:outline-drag-indicator" />
+      </ToggleWrapper>
+    </Tippy>
+  )
+}

apps/extension/src/Components/Sidebar/index.tsx

@@ -1,26 +1,14 @@
 import React, { useMemo } from 'react'
 
 import quillPenLine from '@iconify/icons-ri/quill-pen-line'
-import timerFlashLine from '@iconify/icons-ri/timer-flash-line'
-import { Icon } from '@iconify/react'
-import Tippy from '@tippyjs/react'
 
-import { TitleWithShortcut } from '@workduck-io/mex-components'
-
-import {
-  ExtInfobarMode,
-  InfoBarWrapper,
-  MexIcon,
-  ReminderInfobar,
-  SidebarToggleWrapper,
-  Tabs,
-  TabType
-} from '@mexit/shared'
+import { ExtInfobarMode, InfoBarWrapper, MexIcon, Tabs, TabType } from '@mexit/shared'
 
 import { useSidebarTransition } from '../../Hooks/useSidebarTransition'
 import { useLayoutStore } from '../../Stores/useLayoutStore'
 import { getElementById } from '../../contentScript'
 import { ContextInfoBar } from './ContextInfoBar'
+import { DraggableToggle } from './DraggableToggle'
 import { NotesInfoBar } from './NotesInfoBar'
 import { SnippetsInfoBar } from './SnippetsInfoBar'
 import { ExtSideNav, SidebarContainer } from './styled'
@@ -77,8 +65,8 @@ const ExtInfoBarItems = () => {
 }
 
 export const ExtInfoBar = () => {
-  const { rhSidebar, toggleRHSidebar } = useLayoutStore()
-  const { rhSidebarSpringProps, overlaySidebar, endColumnWidth } = useSidebarTransition()
+  const { rhSidebar } = useLayoutStore()
+  const { rhSidebarSpringProps } = useSidebarTransition()
 
   const infobar = useLayoutStore((s) => s.infobar)
 
@@ -99,26 +87,7 @@ export const ExtInfoBar = () => {
           <ExtInfoBarItems />
         </InfoBarWrapper>
       </ExtSideNav>
-      <Tippy
-        theme="mex-bright"
-        placement="left"
-        appendTo={() => getElementById('ext-side-nav')}
-        content={<TitleWithShortcut title={rhSidebar.expanded ? 'Collapse Sidebar' : 'Expand Sidebar'} />}
-      >
-        <SidebarToggleWrapper
-          side="right"
-          $isVisible={true}
-          onClick={toggleRHSidebar}
-          expanded={rhSidebar.expanded}
-          show={rhSidebar.show}
-          endColumnWidth={endColumnWidth}
-          // {...getFocusProps(focusMode)}
-        >
-          <Icon
-            icon={rhSidebar.expanded ? 'heroicons-solid:chevron-double-right' : 'heroicons-solid:chevron-double-left'}
-          />
-        </SidebarToggleWrapper>
-      </Tippy>
+      <DraggableToggle />
     </SidebarContainer>
   )
 }

apps/extension/src/Stores/useLayoutStore.ts

@@ -1,12 +1,18 @@
 import create from 'zustand'
+import { persist } from 'zustand/middleware'
 
 import { ExtInfobarMode } from '@mexit/shared'
 
+import { asyncLocalStorage } from '../Utils/chromeStorageAdapter'
+
 interface LayoutState {
   rhSidebar: {
     expanded: boolean
     show: boolean
   }
+  toggleTop: number
+  setToggleTop: (height: number) => void
+
   infobar: { mode: ExtInfobarMode }
 
   toggleRHSidebar: () => void
@@ -17,25 +23,33 @@ interface LayoutState {
   setInfobarMode: (mode: ExtInfobarMode) => void
 }
 
-export const useLayoutStore = create<LayoutState>((set, get) => ({
-  // RHSidebar
-  rhSidebar: {
-    expanded: false,
-    show: true
-  },
-  toggleRHSidebar: () => set((state) => ({ rhSidebar: { ...state.rhSidebar, expanded: !state.rhSidebar.expanded } })),
-  setRHSidebarExpanded: (expanded) => set((state) => ({ rhSidebar: { ...state.rhSidebar, expanded } })),
-  showRHSidebar: () => set((state) => ({ rhSidebar: { ...state.rhSidebar, show: true } })),
-  hideRHSidebar: () => set((state) => ({ rhSidebar: { ...state.rhSidebar, show: false } })),
-
-  // Infobar
-  infobar: {
-    visible: true,
-    mode: 'context'
-  },
-  setInfobarMode: (mode) => {
-    const curMode = get().infobar.mode
-    if (curMode === mode) return
-    set({ infobar: { ...get().infobar, mode } })
-  }
-}))
+export const useLayoutStore = create<LayoutState>(
+  persist(
+    (set, get) => ({
+      // RHSidebar
+      rhSidebar: {
+        expanded: false,
+        show: true
+      },
+      toggleTop: 44,
+      setToggleTop: (height) => set({ toggleTop: height }),
+      toggleRHSidebar: () =>
+        set((state) => ({ rhSidebar: { ...state.rhSidebar, expanded: !state.rhSidebar.expanded } })),
+      setRHSidebarExpanded: (expanded) => set((state) => ({ rhSidebar: { ...state.rhSidebar, expanded } })),
+      showRHSidebar: () => set((state) => ({ rhSidebar: { ...state.rhSidebar, show: true } })),
+      hideRHSidebar: () => set((state) => ({ rhSidebar: { ...state.rhSidebar, show: false } })),
+
+      // Infobar
+      infobar: {
+        visible: true,
+        mode: 'context'
+      },
+      setInfobarMode: (mode) => {
+        const curMode = get().infobar.mode
+        if (curMode === mode) return
+        set({ infobar: { ...get().infobar, mode } })
+      }
+    }),
+    { name: 'ext-layout-store', getStorage: () => asyncLocalStorage }
+  )
+)

yarn.lock

@@ -12846,6 +12846,11 @@ react-universal-interface@^0.6.2:
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
+react-use-hoverintent@^1.2.9:
+  version "1.2.9"
+  resolved "https://registry.yarnpkg.com/react-use-hoverintent/-/react-use-hoverintent-1.2.9.tgz#a56a2117028448f3eb2cd0a75be64eb50c8d3490"
+  integrity sha512-wS0mUCK0G8VTECj1Gyetm4+z/iRO4zuydNYmWDy7Z+dmyUzXODMFrQSDqiCBxksXyrr56Dd2M2YnL1kGoQ7/BA==
+
 react-use@^17.3.2:
   version "17.4.0"
   resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d"