feat: Added a conflict resolution dialog and a Conflicts view for easier management of conflicts (#2337)

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -1,46 +1,61 @@
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react'
 import { Slot } from '@radix-ui/react-slot'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles'
+import { getAdjustedStylesForNonPortalPopover } from '../Popover/Utils/getAdjustedStylesForNonPortal'
 
 const StyledTooltip = ({
   children,
   className,
   label,
+  showOnMobile = false,
+  showOnHover = true,
   ...props
 }: {
   children: ReactNode
+  label: NonNullable<ReactNode>
   className?: string
-  label: string
+  showOnMobile?: boolean
+  showOnHover?: boolean
 } & Partial<TooltipOptions>) => {
+  const [forceOpen, setForceOpen] = useState<boolean | undefined>()
+
   const tooltip = useTooltipStore({
     timeout: 350,
+    open: forceOpen,
   })
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
 
-  if (isMobile) {
+  if (isMobile && !showOnMobile) {
     return <>{children}</>
   }
 
   return (
     <>
-      <TooltipAnchor store={tooltip} as={Slot}>
+      <TooltipAnchor
+        onFocus={() => setForceOpen(true)}
+        onBlur={() => setForceOpen(undefined)}
+        store={tooltip}
+        as={Slot}
+        showOnHover={showOnHover}
+      >
         {children}
       </TooltipAnchor>
       <Tooltip
+        autoFocusOnShow={!showOnHover}
         store={tooltip}
         className={classNames(
           'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow',
           className,
         )}
         updatePosition={() => {
-          const { popoverElement, anchorElement } = tooltip.getState()
+          const { popoverElement, anchorElement, open } = tooltip.getState()
 
           const documentElement = document.querySelector('.main-ui-view')
 
-          if (!popoverElement || !anchorElement || !documentElement) {
+          if (!popoverElement || !anchorElement || !documentElement || !open) {
             return
           }
 
@@ -55,10 +70,20 @@ const StyledTooltip = ({
             popoverRect,
             documentRect,
             disableMobileFullscreenTakeover: true,
-            offset: 6,
+            offset: props.gutter ? props.gutter : 6,
           })
 
+          if (!styles) {
+            return
+          }
+
           Object.assign(popoverElement.style, styles)
+
+          if (!props.portal) {
+            const adjustedStyles = getAdjustedStylesForNonPortalPopover(popoverElement, styles)
+            popoverElement.style.setProperty('--translate-x', adjustedStyles['--translate-x'])
+            popoverElement.style.setProperty('--translate-y', adjustedStyles['--translate-y'])
+          }
         }}
         {...props}
       >