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

2023-06-25 14:27:51 +05:30
parent 49d43fd14b
commit e0e9249334
48 changed files with 1201 additions and 94 deletions
--- a/packages/web/src/javascripts/Components/Button/Button.tsx
+++ b/packages/web/src/javascripts/Components/Button/Button.tsx
@@ -58,7 +58,7 @@ const getClassName = (
  let colors = primary ? getColorsForPrimaryVariant(style) : getColorsForNormalVariant(style)

  let focusHoverStates = primary
-    ? 'hover:brightness-125 focus:outline-none focus:brightness-125'
+    ? 'hover:brightness-125 focus:outline-none focus-visible:brightness-125'
    : 'focus:bg-contrast focus:outline-none hover:border-info hover:text-info hover:bg-contrast'

  if (disabled) {
@@ -68,7 +68,7 @@ const getClassName = (
      : 'focus:bg-default focus:outline-none hover:bg-default'
  }

-  return `${rounded} font-bold ${width} ${padding} ${textSize} ${colors} ${borders} ${focusHoverStates} ${cursor}`
+  return `${rounded} font-bold select-none ${width} ${padding} ${textSize} ${colors} ${borders} ${focusHoverStates} ${cursor}`
 }

 interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
--- a/packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx
+++ b/packages/web/src/javascripts/Components/Checkbox/CheckIndicator.tsx
@@ -0,0 +1,25 @@
+import { classNames } from '@standardnotes/utils'
+import Icon from '../Icon/Icon'
+import { ComponentPropsWithoutRef } from 'react'
+
+const CheckIndicator = ({ checked, className, ...props }: { checked: boolean } & ComponentPropsWithoutRef<'div'>) => (
+  <div
+    className={classNames(
+      'relative h-5 w-5 rounded border-2 md:h-4 md:w-4',
+      checked ? 'border-info bg-info' : 'border-passive-1',
+      className,
+    )}
+    role="presentation"
+    {...props}
+  >
+    {checked && (
+      <Icon
+        type="check"
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-info-contrast"
+        size="small"
+      />
+    )}
+  </div>
+)
+
+export default CheckIndicator
--- a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
@@ -102,6 +102,7 @@ export const IconNameToSvgMapping = {
  listed: icons.ListedIcon,
  lock: icons.LockIcon,
  markdown: icons.MarkdownIcon,
+  merge: icons.MergeIcon,
  more: icons.MoreIcon,
  notes: icons.NotesIcon,
  paragraph: icons.TextParagraphLongIcon,
@@ -126,6 +127,7 @@ export const IconNameToSvgMapping = {
  superscript: icons.SuperscriptIcon,
  sync: icons.SyncIcon,
  tasks: icons.TasksIcon,
+  text: icons.TextIcon,
  themes: icons.ThemesIcon,
  trash: icons.TrashIcon,
  tune: icons.TuneIcon,
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -23,6 +23,7 @@ type Props = {
  isBidirectional: boolean
  inlineFlex?: boolean
  className?: string
+  readonly?: boolean
 }

 const LinkedItemBubble = ({
@@ -36,6 +37,7 @@ const LinkedItemBubble = ({
  isBidirectional,
  inlineFlex,
  className,
+  readonly,
 }: Props) => {
  const ref = useRef<HTMLButtonElement>(null)
  const application = useApplication()
@@ -60,6 +62,9 @@ const LinkedItemBubble = ({
  const onClick: MouseEventHandler = (event) => {
    if (wasClicked && event.target !== unlinkButtonRef.current) {
      setWasClicked(false)
+      if (readonly) {
+        return
+      }
      void activateItem?.(link.item)
    } else {
      setWasClicked(true)
@@ -112,7 +117,7 @@ const LinkedItemBubble = ({
      onKeyDown={onKeyDown}
    >
      <Icon type={icon} className={classNames('mr-1 flex-shrink-0', iconClassName)} size="small" />
-      <span className="max-w-290px flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
+      <span className="flex items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
        {tagTitle && <span className="text-passive-1">{tagTitle.titlePrefix}</span>}
        <span className="flex items-center gap-1">
          {link.type === 'linked-by' && link.item.content_type !== ContentType.Tag && (
@@ -121,7 +126,7 @@ const LinkedItemBubble = ({
          {getItemTitleInContextOfLinkBubble(link.item)}
        </span>
      </span>
-      {showUnlinkButton && (
+      {showUnlinkButton && !readonly && (
        <a
          ref={unlinkButtonRef}
          role="button"
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx
@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
 import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
@@ -18,9 +18,22 @@ type Props = {
  linkingController: LinkingController
  item: DecryptedItemInterface
  hideToggle?: boolean
+  readonly?: boolean
+  className?: {
+    base?: string
+    withToggle?: string
+  }
+  isCollapsedByDefault?: boolean
 }

-const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = false }: Props) => {
+const LinkedItemBubblesContainer = ({
+  item,
+  linkingController,
+  hideToggle = false,
+  readonly = false,
+  className = {},
+  isCollapsedByDefault = false,
+}: Props) => {
  const { toggleAppPane } = useResponsiveAppPane()

  const commandService = useCommandService()
@@ -106,55 +119,66 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
    )
  }

-  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(() => isCollapsedByDefault)

  const itemsToDisplay = allItemsLinkedToItem.concat(notesLinkingToItem).concat(filesLinkingToItem)
  const visibleItems = isCollapsed ? itemsToDisplay.slice(0, 5) : itemsToDisplay
  const nonVisibleItems = itemsToDisplay.length - visibleItems.length

-  const [canShowContainerToggle, setCanShowContainerToggle] = useState(false)
-  const linkInputRef = useRef<HTMLInputElement>(null)
-  const linkContainerRef = useRef<HTMLDivElement>(null)
+  const [canShowContainerToggle, setCanShowContainerToggle] = useState(true)
+  const [linkContainer, setLinkContainer] = useState<HTMLDivElement | null>(null)
  useEffect(() => {
-    const container = linkContainerRef.current
-    const linkInput = linkInputRef.current
-
-    if (!container || !linkInput) {
+    const container = linkContainer
+    if (!container) {
      return
    }

    const resizeObserver = new ResizeObserver(() => {
-      if (container.clientHeight > linkInput.clientHeight) {
+      const firstChild = container.firstElementChild
+      if (!firstChild) {
+        return
+      }
+
+      const threshold = firstChild.clientHeight + 4
+      const didWrap = container.clientHeight > threshold
+
+      if (didWrap) {
        setCanShowContainerToggle(true)
      } else {
        setCanShowContainerToggle(false)
      }
    })

-    resizeObserver.observe(linkContainerRef.current)
+    resizeObserver.observe(container)

    return () => {
      resizeObserver.disconnect()
    }
-  }, [])
+  }, [linkContainer])

  const shouldHideToggle = hideToggle || (!canShowContainerToggle && !isCollapsed)

+  if (readonly && itemsToDisplay.length === 0) {
+    return null
+  }
+
  return (
    <div
      className={classNames(
-        'flex w-full justify-between',
-        itemsToDisplay.length > 0 && !shouldHideToggle && 'pt-2',
+        'flex w-full flex-wrap justify-between md:flex-nowrap',
+        itemsToDisplay.length > 0 && !shouldHideToggle ? 'pt-2 ' + className.withToggle : undefined,
        isCollapsed ? 'gap-4' : 'gap-1',
+        className.base,
      )}
    >
      <div
        className={classNames(
-          'note-view-linking-container flex min-w-80 max-w-full items-center gap-2 bg-transparent md:-mr-2',
+          'note-view-linking-container flex min-w-80 max-w-full items-center gap-2 bg-transparent',
          allItemsLinkedToItem.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
          isCollapsed ? 'overflow-hidden' : 'flex-wrap',
+          !shouldHideToggle && 'mr-2',
        )}
-        ref={linkContainerRef}
+        ref={setLinkContainer}
      >
        {visibleItems.map((link) => (
          <LinkedItemBubble
@@ -167,18 +191,20 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
            focusedId={focusedId}
            setFocusedId={setFocusedId}
            isBidirectional={isItemBidirectionallyLinked(link)}
+            readonly={readonly}
          />
        ))}
        {isCollapsed && nonVisibleItems > 0 && <span className="flex-shrink-0">and {nonVisibleItems} more...</span>}
-        <ItemLinkAutocompleteInput
-          focusedId={focusedId}
-          linkingController={linkingController}
-          focusPreviousItem={focusPreviousItem}
-          setFocusedId={setFocusedId}
-          hoverLabel={`Focus input to add a link (${shortcut})`}
-          item={item}
-          ref={linkInputRef}
-        />
+        {!readonly && (
+          <ItemLinkAutocompleteInput
+            focusedId={focusedId}
+            linkingController={linkingController}
+            focusPreviousItem={focusPreviousItem}
+            setFocusedId={setFocusedId}
+            hoverLabel={`Focus input to add a link (${shortcut})`}
+            item={item}
+          />
+        )}
      </div>
      {itemsToDisplay.length > 0 && !shouldHideToggle && (
        <RoundIconButton
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/ConflictListItem.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/ConflictListItem.tsx
@@ -0,0 +1,96 @@
+import { SNNote, classNames } from '@standardnotes/snjs'
+import { MouseEventHandler } from 'react'
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { useApplication } from '../../ApplicationProvider'
+import { useNoteAttributes } from '../../NotesOptions/NoteAttributes'
+import CheckIndicator from '../../Checkbox/CheckIndicator'
+import { VisuallyHidden } from '@ariakit/react'
+import Icon from '../../Icon/Icon'
+import StyledTooltip from '../../StyledTooltip/StyledTooltip'
+
+export const ConflictListItem = ({
+  isSelected,
+  onClick,
+  title,
+  note,
+  disabled,
+}: {
+  isSelected: boolean
+  disabled: boolean
+  onClick: MouseEventHandler<HTMLButtonElement>
+  title: string
+  note: SNNote
+}) => {
+  const application = useApplication()
+  const { words, characters, paragraphs, dateLastModified, dateCreated, format } = useNoteAttributes(application, note)
+
+  return (
+    <button
+      tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
+      className={classNames(
+        'flex w-full select-none flex-col overflow-hidden border-l-2 bg-transparent px-3 py-2.5 pl-4 text-left text-sm text-text',
+        isSelected ? 'border-info bg-info-backdrop' : 'border-transparent',
+        disabled
+          ? 'cursor-not-allowed opacity-75'
+          : 'cursor-pointer hover:bg-contrast hover:text-foreground focus:bg-info-backdrop focus:shadow-none',
+      )}
+      onClick={onClick}
+      data-selected={isSelected}
+      disabled={disabled}
+    >
+      <div className="mb-1.5 flex items-center gap-2">
+        <CheckIndicator checked={isSelected} />
+        <div className="font-semibold">{title}</div>
+      </div>
+      <div className="w-full text-sm text-neutral lg:text-xs">
+        <div className="mb-1.5 flex items-center gap-2">
+          <StyledTooltip gutter={8} label="Last modified" className="!z-modal">
+            <div className="flex-shrink-0">
+              <Icon type="restore" size="medium" />
+            </div>
+          </StyledTooltip>
+          <VisuallyHidden>Last modified</VisuallyHidden> {dateLastModified}
+        </div>
+        <div className="mb-1.5 flex items-center gap-2">
+          <StyledTooltip gutter={8} label="Created" className="!z-modal">
+            <div className="flex-shrink-0">
+              <Icon type="pencil-filled" size="medium" />
+            </div>
+          </StyledTooltip>
+          <VisuallyHidden>Created</VisuallyHidden> {dateCreated}
+        </div>
+        <div className="mb-1.5 flex items-center gap-2 overflow-hidden">
+          <StyledTooltip gutter={8} label="Note ID" className="!z-modal">
+            <div className="flex-shrink-0">
+              <Icon type="info" size="medium" />
+            </div>
+          </StyledTooltip>
+          <VisuallyHidden>Note ID</VisuallyHidden>
+          <div className="overflow-hidden text-ellipsis whitespace-nowrap">{note.uuid}</div>
+        </div>
+        {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
+          <div className="flex items-center gap-2">
+            <StyledTooltip gutter={8} label={`${words} words`} className="!z-modal">
+              <div className="flex items-center gap-1">
+                <Icon type="line-width" size="medium" />
+                {words}
+              </div>
+            </StyledTooltip>
+            <StyledTooltip gutter={8} label={`${characters} characters`} className="!z-modal">
+              <div className="flex items-center gap-1">
+                <Icon type="bold" size="small" />
+                <span>{characters}</span>
+              </div>
+            </StyledTooltip>
+            <StyledTooltip gutter={8} label={`${paragraphs} paragraphs`} className="!z-modal">
+              <div className="flex items-center gap-1">
+                <Icon type="paragraph" size="medium" />
+                <span>{paragraphs}</span>
+              </div>
+            </StyledTooltip>
+          </div>
+        ) : null}
+      </div>
+    </button>
+  )
+}
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx
@@ -0,0 +1,128 @@
+import { NoteType, SNNote, classNames } from '@standardnotes/snjs'
+import { useEffect, useState } from 'react'
+import fastdiff from 'fast-diff'
+import { HeadlessSuperConverter } from '../../SuperEditor/Tools/HeadlessSuperConverter'
+
+const DiffSpan = ({ state, text }: { state: fastdiff.Diff[0]; text: fastdiff.Diff[1] }) => (
+  <span
+    data-diff={state !== fastdiff.EQUAL ? state : undefined}
+    className={classNames(
+      'whitespace-pre-wrap',
+      state === fastdiff.INSERT && 'bg-success text-success-contrast',
+      state === fastdiff.DELETE && 'bg-danger text-danger-contrast',
+    )}
+  >
+    {text}
+  </span>
+)
+
+export const DiffView = ({
+  selectedNotes,
+  convertSuperToMarkdown,
+}: {
+  selectedNotes: SNNote[]
+  convertSuperToMarkdown: boolean
+}) => {
+  const [titleDiff, setTitleDiff] = useState<fastdiff.Diff[]>([])
+  const [textDiff, setTextDiff] = useState<fastdiff.Diff[]>([])
+
+  useEffect(() => {
+    const firstNote = selectedNotes[0]
+    const firstTitle = firstNote.title
+    const firstText =
+      firstNote.noteType === NoteType.Super && convertSuperToMarkdown
+        ? new HeadlessSuperConverter().convertString(firstNote.text, 'md')
+        : firstNote.text
+
+    const secondNote = selectedNotes[1]
+    const secondTitle = secondNote.title
+    const secondText =
+      secondNote.noteType === NoteType.Super && convertSuperToMarkdown
+        ? new HeadlessSuperConverter().convertString(secondNote.text, 'md')
+        : secondNote.text
+
+    const titleDiff = fastdiff(firstTitle, secondTitle, undefined, true)
+    const textDiff = fastdiff(firstText, secondText, undefined, true)
+
+    setTitleDiff(titleDiff)
+    setTextDiff(textDiff)
+  }, [convertSuperToMarkdown, selectedNotes])
+
+  const [preElement, setPreElement] = useState<HTMLPreElement | null>(null)
+  const [diffVisualizer, setDiffVisualizer] = useState<HTMLDivElement | null>(null)
+  const [hasOverflow, setHasOverflow] = useState(false)
+
+  useEffect(() => {
+    if (!preElement) {
+      return
+    }
+
+    setHasOverflow(preElement.scrollHeight > preElement.clientHeight)
+  }, [preElement, textDiff])
+
+  useEffect(() => {
+    if (!preElement || !diffVisualizer) {
+      return
+    }
+
+    if (!hasOverflow) {
+      return
+    }
+
+    if (!textDiff.length) {
+      return
+    }
+
+    diffVisualizer.innerHTML = ''
+    const preElementRect = preElement.getBoundingClientRect()
+    const diffVisualizerRect = diffVisualizer.getBoundingClientRect()
+
+    const diffs = preElement.querySelectorAll('[data-diff]')
+
+    diffs.forEach((diff) => {
+      const state = diff.getAttribute('data-diff')
+      if (!state) {
+        return
+      }
+      const parsedState = parseInt(state)
+
+      const rect = diff.getBoundingClientRect()
+
+      const topAsPercent = (rect.top - preElementRect.top) / preElement.scrollHeight
+      const topAdjustedForDiffVisualizer = diffVisualizerRect.height * topAsPercent
+
+      const heightAsPercent = rect.height / preElement.scrollHeight
+      const heightAdjustedForDiffVisualizer = diffVisualizerRect.height * heightAsPercent
+
+      const div = document.createElement('div')
+      div.className = `absolute top-0 left-0 w-full bg-${
+        parsedState === fastdiff.INSERT ? 'success' : 'danger'
+      } opacity-50`
+      div.style.height = `${heightAdjustedForDiffVisualizer}px`
+      div.style.top = `${topAdjustedForDiffVisualizer}px`
+
+      diffVisualizer.appendChild(div)
+    })
+  }, [preElement, hasOverflow, textDiff, diffVisualizer])
+
+  return (
+    <div className="force-custom-scrollbar relative flex flex-grow flex-col overflow-hidden">
+      <div className="w-full px-4 py-4 text-base font-bold">
+        {titleDiff.map(([state, text], index) => (
+          <DiffSpan state={state} text={text} key={index} />
+        ))}
+      </div>
+      <pre
+        className="font-editor min-h-0 w-full flex-grow overflow-y-auto whitespace-pre-wrap p-4 pt-0 text-editor [&::-webkit-scrollbar]:bg-transparent"
+        ref={setPreElement}
+      >
+        {textDiff.map(([state, text], index) => (
+          <DiffSpan state={state} text={text} key={index} />
+        ))}
+      </pre>
+      {hasOverflow && (
+        <div className="absolute top-0 right-0 z-[-1] h-full w-[19px] border-l border-border" ref={setDiffVisualizer} />
+      )}
+    </div>
+  )
+}
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteConflictResolutionModal.tsx
@@ -0,0 +1,397 @@
+import { NoteType, SNNote, classNames } from '@standardnotes/snjs'
+import Modal, { ModalAction } from '../../Modal/Modal'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { useApplication } from '../../ApplicationProvider'
+import { confirmDialog } from '@standardnotes/ui-services'
+import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
+import ModalDialogButtons from '../../Modal/ModalDialogButtons'
+import {
+  Checkbox,
+  Select,
+  SelectArrow,
+  SelectItem,
+  SelectList,
+  Toolbar,
+  ToolbarItem,
+  useSelectStore,
+  useToolbarStore,
+} from '@ariakit/react'
+import Popover from '../../Popover/Popover'
+import Icon from '../../Icon/Icon'
+import Button from '../../Button/Button'
+import Spinner from '../../Spinner/Spinner'
+import Switch from '../../Switch/Switch'
+import StyledTooltip from '../../StyledTooltip/StyledTooltip'
+import { DiffView } from './DiffView'
+import { NoteContent } from './NoteContent'
+import { ConflictListItem } from './ConflictListItem'
+
+type ConflictAction = 'move-to-trash' | 'delete-permanently'
+type MultipleSelectionMode = 'preview' | 'diff'
+
+const NoteConflictResolutionModal = ({
+  currentNote,
+  conflictedNotes,
+  close,
+}: {
+  currentNote: SNNote
+  conflictedNotes: SNNote[]
+  close: () => void
+}) => {
+  const allVersions = useMemo(() => [currentNote].concat(conflictedNotes), [conflictedNotes, currentNote])
+
+  const application = useApplication()
+  const [selectedVersions, setSelectedVersions] = useState([currentNote.uuid])
+
+  const selectedNotes = useMemo(() => {
+    return allVersions.filter((note) => selectedVersions.includes(note.uuid))
+  }, [allVersions, selectedVersions])
+
+  const trashNote = useCallback(
+    async (note: SNNote) => {
+      await application.mutator
+        .changeItem(note, (mutator) => {
+          mutator.trashed = true
+          mutator.conflictOf = undefined
+        })
+        .catch(console.error)
+      setSelectedVersions([allVersions[0].uuid])
+    },
+    [allVersions, application.mutator],
+  )
+
+  const deleteNotePermanently = useCallback(
+    async (note: SNNote) => {
+      await application.mutator
+        .deleteItem(note)
+        .catch(console.error)
+        .then(() => {
+          setSelectedVersions([allVersions[0].uuid])
+        })
+    },
+    [allVersions, application.mutator],
+  )
+
+  const [selectedAction, setSelectionAction] = useState<ConflictAction>('move-to-trash')
+  const selectStore = useSelectStore({
+    value: selectedAction,
+    setValue: (value) => setSelectionAction(value as ConflictAction),
+  })
+  const [isPerformingAction, setIsPerformingAction] = useState(false)
+
+  const keepOnlySelected = useCallback(async () => {
+    const shouldDeletePermanently = selectedAction === 'delete-permanently'
+
+    const confirmDialogText = `This will keep only the selected versions and ${
+      shouldDeletePermanently ? 'delete the other versions permanently.' : 'move the other versions to the trash.'
+    } Are you sure?`
+
+    if (
+      await confirmDialog({
+        title: 'Keep only selected versions?',
+        text: confirmDialogText,
+        confirmButtonStyle: 'danger',
+      })
+    ) {
+      const nonSelectedNotes = allVersions.filter((note) => !selectedVersions.includes(note.uuid))
+      selectStore.hide()
+      setIsPerformingAction(true)
+      await Promise.all(
+        nonSelectedNotes.map((note) => (shouldDeletePermanently ? deleteNotePermanently(note) : trashNote(note))),
+      )
+      await application.mutator.changeItems(selectedNotes, (mutator) => {
+        mutator.conflictOf = undefined
+      })
+      setIsPerformingAction(false)
+      void application.getViewControllerManager().selectionController.selectItem(selectedNotes[0].uuid, true)
+      void application.sync.sync()
+      close()
+    }
+  }, [
+    allVersions,
+    application,
+    close,
+    deleteNotePermanently,
+    selectStore,
+    selectedAction,
+    selectedNotes,
+    selectedVersions,
+    trashNote,
+  ])
+
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+  const actions = useMemo(
+    (): ModalAction[] => [
+      {
+        label: 'Cancel',
+        onClick: close,
+        type: 'cancel',
+        mobileSlot: 'left',
+      },
+    ],
+    [close],
+  )
+
+  const listRef = useRef<HTMLDivElement>(null)
+  useListKeyboardNavigation(listRef)
+
+  const [selectedMobileTab, setSelectedMobileTab] = useState<'list' | 'preview'>('list')
+
+  const toolbarStore = useToolbarStore()
+  const isSelectOpen = selectStore.useState('open')
+  const [selectAnchor, setSelectAnchor] = useState<HTMLButtonElement | null>(null)
+
+  const [multipleSelectionMode, setMultipleSelectionMode] = useState<MultipleSelectionMode>(
+    isMobileScreen ? 'diff' : 'preview',
+  )
+  const isPreviewMode = multipleSelectionMode === 'preview'
+  useEffect(() => {
+    if (selectedNotes.length !== 2) {
+      setMultipleSelectionMode('preview')
+    }
+
+    if (isMobileScreen && selectedNotes.length === 2) {
+      setMultipleSelectionMode('diff')
+    }
+  }, [isMobileScreen, selectedNotes.length])
+  const showSuperConversionInfo = selectedNotes.some((note) => note.noteType === NoteType.Super) && !isPreviewMode
+  const [compareSuperMarkdown, setCompareSuperMarkdown] = useState(true)
+
+  const [comparisonScrollPos, setComparisonScrollPos] = useState(0)
+  const [shouldSyncComparisonScroll, setShouldSyncComparisonScroll] = useState(true)
+
+  return (
+    <Modal
+      title="Resolve conflicts"
+      className={{
+        content: 'md:h-full md:w-[70vw]',
+        description: 'flex flex-col overflow-x-hidden md:flex-row',
+      }}
+      actions={actions}
+      close={close}
+      customFooter={
+        <ModalDialogButtons className={selectedNotes.length > 1 ? 'hidden md:flex' : ''}>
+          <Button className="mr-auto hidden md:inline-block" onClick={close} disabled={isPerformingAction}>
+            Cancel
+          </Button>
+          <Toolbar className="flex w-full items-stretch text-info-contrast md:w-auto" store={toolbarStore}>
+            <ToolbarItem
+              onClick={keepOnlySelected}
+              className="flex-grow rounded rounded-r-none bg-info px-3 py-1.5 text-base font-bold ring-info ring-offset-2 ring-offset-default hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:brightness-110 lg:text-sm"
+              disabled={isPerformingAction}
+            >
+              {isPerformingAction ? (
+                <>
+                  <Spinner className="h-4 w-4 border-info-contrast" />
+                </>
+              ) : (
+                <>Keep selected, {selectedAction === 'move-to-trash' ? 'trash others' : 'delete others'}</>
+              )}
+            </ToolbarItem>
+            <Select
+              ref={setSelectAnchor}
+              render={
+                <ToolbarItem
+                  className="relative rounded rounded-l-none bg-info py-1.5 px-3 ring-info hover:brightness-110 focus:ring-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-default focus-visible:brightness-110"
+                  disabled={isPerformingAction}
+                >
+                  <SelectArrow className="block rotate-180" />
+                  <div className="absolute top-0 left-0 h-full w-[2px] bg-info brightness-[.85]" />
+                </ToolbarItem>
+              }
+              store={selectStore}
+            />
+            <Popover
+              title="Conflict options"
+              open={isSelectOpen}
+              togglePopover={selectStore.toggle}
+              anchorElement={selectAnchor}
+              className="!fixed z-modal border border-border py-1"
+              side="top"
+              align="end"
+              offset={4}
+              hideOnClickInModal
+            >
+              <SelectList
+                className="cursor-pointer divide-y divide-border [&>[data-active-item]]:bg-passive-5"
+                store={selectStore}
+              >
+                <SelectItem className="px-2.5 py-2 hover:bg-passive-5" value="move-to-trash">
+                  <div className="flex items-center gap-1 text-sm font-bold text-text">
+                    {selectedAction === 'move-to-trash' ? (
+                      <Icon type="check-bold" size="small" />
+                    ) : (
+                      <div className="h-3.5 w-3.5" />
+                    )}
+                    Move others to trash
+                  </div>
+                  <div className="ml-4.5 text-neutral">
+                    Only the selected version will be kept; others will be moved to trash.
+                  </div>
+                </SelectItem>
+                <SelectItem className="px-2.5 py-2 hover:bg-passive-5" value="delete-permanently">
+                  <div className="flex items-center gap-1 text-sm font-bold text-text">
+                    {selectedAction === 'delete-permanently' ? (
+                      <Icon type="check-bold" size="small" />
+                    ) : (
+                      <div className="h-3.5 w-3.5" />
+                    )}
+                    Delete others permanently
+                  </div>
+                  <div className="ml-4.5 text-neutral">
+                    Only the selected version will be kept; others will be deleted permanently.
+                  </div>
+                </SelectItem>
+              </SelectList>
+            </Popover>
+          </Toolbar>
+        </ModalDialogButtons>
+      }
+    >
+      <div className="flex border-b border-border md:hidden">
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'list' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('list')
+          }}
+        >
+          List
+        </button>
+        <button
+          className={classNames(
+            'relative cursor-pointer border-0 bg-default px-3 py-2.5 text-sm focus:shadow-inner',
+            selectedMobileTab === 'preview' ? 'font-medium text-info shadow-bottom' : 'text-text',
+          )}
+          onClick={() => {
+            setSelectedMobileTab('preview')
+          }}
+        >
+          Preview
+        </button>
+      </div>
+      <div
+        className={classNames(
+          'w-full overflow-y-auto border-r border-border py-1.5 md:flex md:w-auto md:min-w-60 md:flex-col',
+          selectedMobileTab !== 'list' && 'hidden md:flex',
+        )}
+        ref={listRef}
+      >
+        {allVersions.map((note, index) => (
+          <ConflictListItem
+            disabled={isPerformingAction}
+            isSelected={selectedVersions.includes(note.uuid)}
+            onClick={() => {
+              setSelectedVersions((versions) => {
+                if (!versions.includes(note.uuid)) {
+                  return versions.length > 1 ? versions.slice(1).concat(note.uuid) : versions.concat(note.uuid)
+                }
+
+                return versions.length > 1 ? versions.filter((version) => version !== note.uuid) : versions
+              })
+              setSelectedMobileTab('preview')
+            }}
+            key={note.uuid}
+            title={index === 0 ? 'Current version' : `Version ${index + 1}`}
+            note={note}
+          />
+        ))}
+      </div>
+      <div
+        className={classNames(
+          'flex w-full flex-grow flex-col overflow-hidden',
+          selectedMobileTab !== 'preview' && 'hidden md:flex',
+        )}
+      >
+        {isPreviewMode && (
+          <div
+            className={classNames(
+              'min-h-0 w-full flex-grow divide-x divide-border pb-0.5',
+              isMobileScreen ? 'flex' : 'grid grid-rows-1',
+            )}
+            style={!isMobileScreen ? { gridTemplateColumns: `repeat(${selectedNotes.length}, 1fr)` } : undefined}
+          >
+            {selectedNotes.map((note) => (
+              <NoteContent
+                note={note}
+                key={note.uuid}
+                scrollPos={comparisonScrollPos}
+                shouldSyncScroll={shouldSyncComparisonScroll}
+                onScroll={(event) => setComparisonScrollPos((event.target as HTMLElement).scrollTop)}
+              />
+            ))}
+          </div>
+        )}
+        {!isPreviewMode && selectedNotes.length === 2 && (
+          <DiffView selectedNotes={selectedNotes} convertSuperToMarkdown={compareSuperMarkdown} />
+        )}
+        {selectedNotes.length === 2 && (
+          <div className="flex min-h-11 items-center justify-center gap-2 border-t border-border px-4 py-1.5">
+            {isPreviewMode && (
+              <StyledTooltip
+                className="!z-modal !max-w-[50ch]"
+                label={shouldSyncComparisonScroll ? 'Scrolling is synced' : 'Scrolling is not synced. Click to sync.'}
+                showOnMobile
+                portal={false}
+              >
+                <div className="relative rounded-full p-1 hover:bg-contrast">
+                  <Icon type={shouldSyncComparisonScroll ? 'link' : 'link-off'} className="text-neutral" />
+                  <Checkbox
+                    className="absolute top-0 left-0 right-0 bottom-0 cursor-pointer opacity-0"
+                    checked={shouldSyncComparisonScroll}
+                    onChange={() => setShouldSyncComparisonScroll((shouldSync) => !shouldSync)}
+                  />
+                </div>
+              </StyledTooltip>
+            )}
+            {!isMobileScreen && (
+              <>
+                <div className={showSuperConversionInfo ? 'ml-9' : ''}>Preview Mode</div>
+                <Switch
+                  checked={!isPreviewMode}
+                  onChange={function (checked: boolean): void {
+                    setMultipleSelectionMode(checked ? 'diff' : 'preview')
+                  }}
+                />
+              </>
+            )}
+            <div className={isPreviewMode ? 'mr-9' : ''}>Diff Mode</div>
+            {showSuperConversionInfo && (
+              <StyledTooltip
+                className="!z-modal !max-w-[50ch]"
+                label={
+                  <>
+                    <div className="mb-2">
+                      Super notes use JSON under the hood to create rich and flexible documents. While neatly organized,
+                      it's not ideal to read or compare manually. Instead, this diff compares a Markdown rendition of
+                      the notes.
+                    </div>
+                    <label className="mb-1 flex select-none items-center gap-2">
+                      <Switch
+                        checked={!compareSuperMarkdown}
+                        onChange={(checked) => setCompareSuperMarkdown(!checked)}
+                      />
+                      Compare JSON instead
+                    </label>
+                  </>
+                }
+                showOnMobile
+                showOnHover={false}
+                portal={false}
+              >
+                <button className="rounded-full p-1 hover:bg-contrast">
+                  <Icon type="info" className="text-neutral" />
+                </button>
+              </StyledTooltip>
+            )}
+          </div>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+export default NoteConflictResolutionModal
--- a/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteContent.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/NoteContent.tsx
@@ -0,0 +1,121 @@
+import { ContentType, NoteType, SNNote } from '@standardnotes/snjs'
+import { UIEventHandler, useEffect, useMemo, useRef } from 'react'
+import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
+import { useApplication } from '../../ApplicationProvider'
+import ComponentView from '../../ComponentView/ComponentView'
+import { ErrorBoundary } from '@/Utils/ErrorBoundary'
+import { BlocksEditor } from '../../SuperEditor/BlocksEditor'
+import { BlocksEditorComposer } from '../../SuperEditor/BlocksEditorComposer'
+import { useLinkingController } from '@/Controllers/LinkingControllerProvider'
+import LinkedItemBubblesContainer from '../../LinkedItems/LinkedItemBubblesContainer'
+
+export const NoteContent = ({
+  note,
+  scrollPos,
+  shouldSyncScroll,
+  onScroll,
+}: {
+  note: SNNote
+  scrollPos: number
+  shouldSyncScroll: boolean
+  onScroll: UIEventHandler
+}) => {
+  const application = useApplication()
+  const linkingController = useLinkingController()
+
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  const componentViewer = useMemo(() => {
+    const editorForCurrentNote = note ? application.componentManager.editorForNote(note) : undefined
+
+    if (!editorForCurrentNote) {
+      return undefined
+    }
+
+    const templateNoteForRevision = application.mutator.createTemplateItem(ContentType.Note, note.content) as SNNote
+
+    const componentViewer = application.componentManager.createComponentViewer(editorForCurrentNote)
+    componentViewer.setReadonly(true)
+    componentViewer.lockReadonly = true
+    componentViewer.overrideContextItem = templateNoteForRevision
+    return componentViewer
+  }, [application.componentManager, application.mutator, note])
+
+  useEffect(() => {
+    return () => {
+      if (componentViewer) {
+        application.componentManager.destroyComponentViewer(componentViewer)
+      }
+    }
+  }, [application, componentViewer])
+
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!shouldSyncScroll) {
+      return
+    }
+
+    if (!containerRef.current) {
+      return
+    }
+
+    const scroller = containerRef.current.querySelector('textarea, .ContentEditable__root')
+
+    if (!scroller) {
+      return
+    }
+
+    scroller.scrollTo({
+      top: scrollPos,
+    })
+  }, [scrollPos, shouldSyncScroll])
+
+  return (
+    <div className="flex h-full flex-grow flex-col overflow-hidden" ref={containerRef}>
+      <div className="w-full px-4 pt-4 text-base font-bold">
+        <div className="title">{note.title}</div>
+      </div>
+      <LinkedItemBubblesContainer
+        item={note}
+        linkingController={linkingController}
+        readonly
+        className={{ base: 'mt-2 px-4', withToggle: '!mt-1 !pt-0' }}
+        isCollapsedByDefault={isMobileScreen}
+      />
+      {componentViewer ? (
+        <div className="component-view">
+          <ComponentView key={componentViewer.identifier} componentViewer={componentViewer} application={application} />
+        </div>
+      ) : note?.noteType === NoteType.Super ? (
+        <ErrorBoundary>
+          <div className="w-full flex-grow overflow-hidden overflow-y-auto">
+            <BlocksEditorComposer readonly initialValue={note.text}>
+              <BlocksEditor
+                readonly
+                className="blocks-editor relative h-full resize-none p-4 text-base focus:shadow-none focus:outline-none"
+                spellcheck={note.spellcheck}
+                onScroll={onScroll}
+              ></BlocksEditor>
+            </BlocksEditorComposer>
+          </div>
+        </ErrorBoundary>
+      ) : (
+        <div className="relative mt-3 min-h-0 flex-grow overflow-hidden">
+          {note.text.length ? (
+            <textarea
+              readOnly={true}
+              className="font-editor h-full w-full resize-none border-0 bg-default p-4 pt-0 text-editor text-text"
+              value={note.text}
+              onScroll={onScroll}
+            />
+          ) : (
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-passive-0">
+              Empty note.
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -9,7 +9,7 @@ import { PrefDefaults } from '@/Constants/PrefDefaults'
 import { StringDeleteNote, STRING_DELETE_LOCKED_ATTEMPT, STRING_DELETE_PLACEHOLDER_ATTEMPT } from '@/Constants/Strings'
 import { log, LoggingDomain } from '@/Logging'
 import { debounce, isDesktopApplication, isMobileScreen } from '@/Utils'
-import { classNames } from '@standardnotes/utils'
+import { classNames, pluralize } from '@standardnotes/utils'
 import {
  ApplicationEvent,
  ComponentArea,
@@ -45,6 +45,10 @@ import { SuperEditorContentId } from '../SuperEditor/Constants'
 import { NoteViewController } from './Controller/NoteViewController'
 import { PlainEditor, PlainEditorInterface } from './PlainEditor/PlainEditor'
 import { EditorMargins, EditorMaxWidths } from '../EditorWidthSelectionModal/EditorWidths'
+import Button from '../Button/Button'
+import ModalOverlay from '../Modal/ModalOverlay'
+import NoteConflictResolutionModal from './NoteConflictResolutionModal/NoteConflictResolutionModal'
+import Icon from '../Icon/Icon'

 const MinimumStatusDuration = 400

@@ -74,6 +78,9 @@ type State = {
  updateSavingIndicator?: boolean
  editorFeatureIdentifier?: string
  noteType?: NoteType
+
+  conflictedNotes: SNNote[]
+  showConflictResolutionModal: boolean
 }

 class NoteView extends AbstractComponent<NoteViewProps, State> {
@@ -84,6 +91,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {

  private removeTrashKeyObserver?: () => void
  private removeComponentStreamObserver?: () => void
+  private removeNoteStreamObserver?: () => void
  private removeComponentManagerObserver?: () => void
  private removeInnerNoteObserver?: () => void

@@ -120,6 +128,8 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
      syncTakingTooLong: false,
      editorFeatureIdentifier: this.controller.item.editorIdentifier,
      noteType: this.controller.item.noteType,
+      conflictedNotes: [],
+      showConflictResolutionModal: false,
    }

    this.noteViewElementRef = createRef<HTMLDivElement>()
@@ -133,6 +143,9 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
    this.removeComponentStreamObserver?.()
    ;(this.removeComponentStreamObserver as unknown) = undefined

+    this.removeNoteStreamObserver?.()
+    ;(this.removeNoteStreamObserver as unknown) = undefined
+
    this.removeInnerNoteObserver?.()
    ;(this.removeInnerNoteObserver as unknown) = undefined

@@ -418,6 +431,37 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
      await this.reloadStackComponents()
      this.debounceReloadEditorComponent()
    })
+
+    this.removeNoteStreamObserver = this.application.streamItems<SNNote>(
+      ContentType.Note,
+      async ({ inserted, changed, removed }) => {
+        const insertedOrChanged = inserted.concat(changed)
+
+        for (const note of insertedOrChanged) {
+          if (note.conflictOf === this.note.uuid && !note.trashed) {
+            this.setState((state) => ({
+              conflictedNotes: state.conflictedNotes
+                .filter((conflictedNote) => conflictedNote.uuid !== note.uuid)
+                .concat([note]),
+            }))
+          } else {
+            this.setState((state) => {
+              return {
+                conflictedNotes: state.conflictedNotes.filter((conflictedNote) => conflictedNote.uuid !== note.uuid),
+              }
+            })
+          }
+        }
+
+        for (const note of removed) {
+          this.setState((state) => {
+            return {
+              conflictedNotes: state.conflictedNotes.filter((conflictedNote) => conflictedNote.uuid !== note.uuid),
+            }
+          })
+        }
+      },
+    )
  }

  private createComponentViewer(component: SNComponent) {
@@ -776,6 +820,12 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
    this.setState({ plainEditorFocused: false })
  }

+  toggleConflictResolutionModal = () => {
+    this.setState((state) => ({
+      showConflictResolutionModal: !state.showConflictResolutionModal,
+    }))
+  }
+
  override render() {
    if (this.controller.dealloced) {
      return null
@@ -803,6 +853,8 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
        ? 'component'
        : 'plain'

+    const shouldShowConflictsButton = this.state.conflictedNotes.length > 0
+
    return (
      <div aria-label="Note" className="section editor sn-component h-full md:max-h-full" ref={this.noteViewElementRef}>
        {this.note && (
@@ -826,7 +878,12 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
            id="editor-title-bar"
            className="content-title-bar section-title-bar z-editor-title-bar w-full bg-default pt-4"
          >
-            <div className="mb-2 flex flex-wrap items-start justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-4 xl:items-center">
+            <div
+              className={classNames(
+                'mb-2 flex flex-wrap justify-between gap-2 md:mb-0 md:flex-nowrap md:gap-4 xl:items-center',
+                shouldShowConflictsButton ? 'items-center' : 'items-start',
+              )}
+            >
              <div className={classNames(this.state.noteLocked && 'locked', 'flex flex-grow items-center')}>
                <MobileItemsListButton />
                <div className="title flex-grow overflow-auto">
@@ -850,6 +907,19 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
                  updateSavingIndicator={this.state.updateSavingIndicator}
                />
              </div>
+              {shouldShowConflictsButton && (
+                <Button
+                  className="flex items-center"
+                  primary
+                  colorStyle="warning"
+                  small
+                  onClick={this.toggleConflictResolutionModal}
+                >
+                  <Icon type="merge" size="small" className="mr-2" />
+                  {this.state.conflictedNotes.length}{' '}
+                  {pluralize(this.state.conflictedNotes.length, 'conflict', 'conflicts')}
+                </Button>
+              )}
              {renderHeaderOptions && (
                <div className="note-view-options-buttons flex items-center gap-3">
                  <LinkedItemsButton
@@ -979,6 +1049,14 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
            })}
          </div>
        </div>
+
+        <ModalOverlay isOpen={this.state.showConflictResolutionModal} close={this.toggleConflictResolutionModal}>
+          <NoteConflictResolutionModal
+            currentNote={this.note}
+            conflictedNotes={this.state.conflictedNotes}
+            close={this.toggleConflictResolutionModal}
+          />
+        </ModalOverlay>
      </div>
    )
  }
--- a/packages/web/src/javascripts/Components/NotesOptions/NoteAttributes.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/NoteAttributes.tsx
@@ -1,13 +1,10 @@
 import { useMemo, FunctionComponent } from 'react'
-import { SNApplication, SNNote } from '@standardnotes/snjs'
+import { SNApplication, SNNote, classNames } from '@standardnotes/snjs'
 import { formatDateForContextMenu } from '@/Utils/DateUtils'
 import { calculateReadTime } from './Utils/calculateReadTime'
 import { countNoteAttributes } from './Utils/countNoteAttributes'

-export const NoteAttributes: FunctionComponent<{
-  application: SNApplication
-  note: SNNote
-}> = ({ application, note }) => {
+export const useNoteAttributes = (application: SNApplication, note: SNNote) => {
  const { words, characters, paragraphs } = useMemo(() => countNoteAttributes(note.text), [note.text])

  const readTime = useMemo(() => (typeof words === 'number' ? calculateReadTime(words) : 'N/A'), [words])
@@ -19,8 +16,29 @@ export const NoteAttributes: FunctionComponent<{
  const editor = application.componentManager.editorForNote(note)
  const format = editor?.package_info?.file_type || 'txt'

+  return {
+    words,
+    characters,
+    paragraphs,
+    readTime,
+    dateLastModified,
+    dateCreated,
+    format,
+  }
+}
+
+export const NoteAttributes: FunctionComponent<{
+  application: SNApplication
+  note: SNNote
+  className?: string
+}> = ({ application, note, className }) => {
+  const { words, characters, paragraphs, readTime, dateLastModified, dateCreated, format } = useNoteAttributes(
+    application,
+    note,
+  )
+
  return (
-    <div className="select-text px-3 py-1.5 text-sm font-medium text-neutral lg:text-xs">
+    <div className={classNames('select-text px-3 py-1.5 text-sm font-medium text-neutral lg:text-xs', className)}>
      {typeof words === 'number' && (format === 'txt' || format === 'md') ? (
        <>
          <div className="mb-1">
--- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
+++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
@@ -7,13 +7,18 @@ import { getAppRect, getPopoverMaxHeight, getPositionedPopoverRect } from './Uti

 const percentOf = (percent: number, value: number) => (percent / 100) * value

+export type PopoverCSSProperties = CSSProperties & {
+  '--translate-x': string
+  '--translate-y': string
+}
+
 const getStylesFromRect = (
  rect: DOMRect,
  options: {
    disableMobileFullscreenTakeover?: boolean
    maxHeight?: number | 'none'
  },
-): CSSProperties => {
+): PopoverCSSProperties => {
  const { disableMobileFullscreenTakeover = false, maxHeight = 'none' } = options

  const canApplyMaxHeight = maxHeight !== 'none' && (!isMobileScreen() || disableMobileFullscreenTakeover)
@@ -22,7 +27,9 @@ const getStylesFromRect = (

  return {
    willChange: 'transform',
-    transform: `translate(${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px, ${rect.y}px)`,
+    '--translate-x': `${shouldApplyMobileWidth ? marginForMobile / 2 : rect.x}px`,
+    '--translate-y': `${rect.y}px`,
+    transform: 'translate(var(--translate-x), var(--translate-y))',
    visibility: 'visible',
    ...(canApplyMaxHeight && {
      maxHeight: `${maxHeight}px`,
@@ -53,7 +60,7 @@ export const getPositionedPopoverStyles = ({
  disableMobileFullscreenTakeover,
  maxHeightFunction,
  offset,
-}: Options): CSSProperties | null => {
+}: Options): PopoverCSSProperties | null => {
  if (!popoverRect || !anchorRect) {
    return null
  }
--- a/packages/web/src/javascripts/Components/Popover/Popover.tsx
+++ b/packages/web/src/javascripts/Components/Popover/Popover.tsx
@@ -46,6 +46,8 @@ const Popover = ({
  disableMobileFullscreenTakeover,
  maxHeight,
  portal,
+  offset,
+  hideOnClickInModal,
 }: Props) => {
  const popoverId = useRef(UuidGenerator.GenerateUuid())

@@ -126,6 +128,8 @@ const Popover = ({
        title={title}
        togglePopover={togglePopover}
        portal={portal}
+        offset={offset}
+        hideOnClickInModal={hideOnClickInModal}
      >
        {children}
      </PositionedPopoverContent>
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -1,14 +1,15 @@
 import { useDocumentRect } from '@/Hooks/useDocumentRect'
 import { useAutoElementRect } from '@/Hooks/useElementRect'
 import { classNames } from '@standardnotes/utils'
-import { useCallback, useLayoutEffect, useState } from 'react'
+import { CSSProperties, useCallback, useLayoutEffect, useState } from 'react'
 import Portal from '../Portal/Portal'
-import { getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
+import { PopoverCSSProperties, getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
 import { PopoverContentProps } from './Types'
 import { usePopoverCloseOnClickOutside } from './Utils/usePopoverCloseOnClickOutside'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { KeyboardKey } from '@standardnotes/ui-services'
+import { getAdjustedStylesForNonPortalPopover } from './Utils/getAdjustedStylesForNonPortal'

 const PositionedPopoverContent = ({
  align = 'end',
@@ -25,6 +26,8 @@ const PositionedPopoverContent = ({
  disableMobileFullscreenTakeover,
  maxHeight,
  portal = true,
+  offset,
+  hideOnClickInModal = false,
 }: PopoverContentProps) => {
  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
  const popoverRect = useAutoElementRect(popoverElement)
@@ -47,13 +50,21 @@ const PositionedPopoverContent = ({
    side,
    disableMobileFullscreenTakeover: disableMobileFullscreenTakeover,
    maxHeightFunction: maxHeight,
+    offset,
  })

+  let adjustedStyles: PopoverCSSProperties | undefined = undefined
+
+  if (!portal && popoverElement && styles) {
+    adjustedStyles = getAdjustedStylesForNonPortalPopover(popoverElement, styles)
+  }
+
  usePopoverCloseOnClickOutside({
    popoverElement,
    anchorElement,
    togglePopover,
    childPopovers,
+    hideOnClickInModal,
    disabled: disableClickOutside,
  })

@@ -83,9 +94,12 @@ const PositionedPopoverContent = ({
          isDesktopScreen || disableMobileFullscreenTakeover ? 'invisible' : '',
          className,
        )}
-        style={{
-          ...styles,
-        }}
+        style={
+          {
+            ...styles,
+            ...adjustedStyles,
+          } as CSSProperties
+        }
        ref={setPopoverElement}
        data-popover={id}
        onKeyDown={(event) => {
--- a/packages/web/src/javascripts/Components/Popover/Types.ts
+++ b/packages/web/src/javascripts/Components/Popover/Types.ts
@@ -42,6 +42,8 @@ type CommonPopoverProps = {
  disableMobileFullscreenTakeover?: boolean
  title: string
  portal?: boolean
+  offset?: number
+  hideOnClickInModal?: boolean
 }

 export type PopoverContentProps = CommonPopoverProps & {
--- a/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
@@ -95,25 +95,25 @@ export const getPositionedPopoverRect = (
  if (side === 'top' || side === 'bottom') {
    switch (align) {
      case 'start':
-        positionPopoverRect.x = buttonRect.left - finalOffset
+        positionPopoverRect.x = buttonRect.left
        break
      case 'center':
-        positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2 - finalOffset
+        positionPopoverRect.x = buttonRect.left - width / 2 + buttonRect.width / 2
        break
      case 'end':
-        positionPopoverRect.x = buttonRect.right - width + finalOffset
+        positionPopoverRect.x = buttonRect.right - width
        break
    }
  } else {
    switch (align) {
      case 'start':
-        positionPopoverRect.y = buttonRect.top - finalOffset
+        positionPopoverRect.y = buttonRect.top
        break
      case 'center':
-        positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2 - finalOffset
+        positionPopoverRect.y = buttonRect.top - height / 2 + buttonRect.height / 2
        break
      case 'end':
-        positionPopoverRect.y = buttonRect.bottom - height + finalOffset
+        positionPopoverRect.y = buttonRect.bottom - height
        break
    }
  }
--- a/packages/web/src/javascripts/Components/Popover/Utils/getAbsolutePositionedParent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/Utils/getAbsolutePositionedParent.tsx
@@ -0,0 +1,19 @@
+export function getAbsolutePositionedParent(element: HTMLElement | null): HTMLElement | null {
+  if (!element) {
+    return null
+  }
+
+  const parent = element.parentElement
+
+  if (!parent) {
+    return null
+  }
+
+  const position = window.getComputedStyle(parent).getPropertyValue('position')
+
+  if (position === 'absolute') {
+    return parent
+  }
+
+  return getAbsolutePositionedParent(parent)
+}
--- a/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/getAdjustedStylesForNonPortal.ts
@@ -0,0 +1,26 @@
+import { PopoverCSSProperties } from '../GetPositionedPopoverStyles'
+import { getAbsolutePositionedParent } from './getAbsolutePositionedParent'
+
+export const getAdjustedStylesForNonPortalPopover = (popoverElement: HTMLElement, styles: PopoverCSSProperties) => {
+  const absoluteParent = getAbsolutePositionedParent(popoverElement)
+  const translateXProperty = styles?.['--translate-x']
+  const translateYProperty = styles?.['--translate-y']
+
+  const parsedTranslateX = translateXProperty ? parseInt(translateXProperty) : 0
+  const parsedTranslateY = translateYProperty ? parseInt(translateYProperty) : 0
+
+  if (!absoluteParent) {
+    return styles
+  }
+
+  const parentRect = absoluteParent.getBoundingClientRect()
+
+  const adjustedTranslateX = parsedTranslateX - parentRect.left
+  const adjustedTranslateY = parsedTranslateY - parentRect.top
+
+  return {
+    ...styles,
+    '--translate-x': `${adjustedTranslateX}px`,
+    '--translate-y': `${adjustedTranslateY}px`,
+  } as PopoverCSSProperties
+}
--- a/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/usePopoverCloseOnClickOutside.ts
@@ -6,6 +6,7 @@ type Options = {
  togglePopover?: () => void
  childPopovers: Set<string>
  disabled?: boolean
+  hideOnClickInModal?: boolean
 }

 export const usePopoverCloseOnClickOutside = ({
@@ -14,6 +15,7 @@ export const usePopoverCloseOnClickOutside = ({
  togglePopover,
  childPopovers,
  disabled,
+  hideOnClickInModal = false,
 }: Options) => {
  useEffect(() => {
    const closeIfClickedOutside = (event: MouseEvent) => {
@@ -26,7 +28,12 @@ export const usePopoverCloseOnClickOutside = ({
      const isPopoverInModal = popoverElement?.closest('[data-dialog]')
      const isDescendantOfModal = isPopoverInModal ? false : !!target.closest('[data-dialog]')

-      if (!isDescendantOfMenu && !isAnchorElement && !isDescendantOfChildPopover && !isDescendantOfModal) {
+      if (
+        !isDescendantOfMenu &&
+        !isAnchorElement &&
+        !isDescendantOfChildPopover &&
+        (!isDescendantOfModal || (isDescendantOfModal && hideOnClickInModal))
+      ) {
        if (!disabled) {
          togglePopover?.()
        }
@@ -39,5 +46,5 @@ export const usePopoverCloseOnClickOutside = ({
      document.removeEventListener('click', closeIfClickedOutside, { capture: true })
      document.removeEventListener('contextmenu', closeIfClickedOutside, { capture: true })
    }
-  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled])
+  }, [anchorElement, childPopovers, popoverElement, togglePopover, disabled, hideOnClickInModal])
 }
--- a/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
+++ b/packages/web/src/javascripts/Components/RevisionHistoryModal/RevisionContentLocked.tsx
@@ -28,7 +28,7 @@ const RevisionContentLocked: FunctionComponent<Props> = ({ subscriptionControlle

  return (
    <div className="flex h-full w-full items-center justify-center">
-      <div className="max-w-40% flex flex-col items-center text-center">
+      <div className="max-w-40% flex flex-col items-center px-8 text-center">
        <HistoryLockedIllustration />
        <div className="mt-2 mb-1 text-lg font-bold">Can't access this version</div>
        <div className="leading-140% mb-4 text-passive-0">
--- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx
+++ b/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}
      >
--- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useCallback, useState } from 'react'
+import { FunctionComponent, UIEventHandler, useCallback, useState } from 'react'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
@@ -35,6 +35,7 @@ type BlocksEditorProps = {
  spellcheck?: boolean
  ignoreFirstChange?: boolean
  readonly?: boolean
+  onScroll?: UIEventHandler
 }

 export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
@@ -45,6 +46,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
  spellcheck,
  ignoreFirstChange = false,
  readonly,
+  onScroll,
 }) => {
  const [didIgnoreFirstChange, setDidIgnoreFirstChange] = useState(false)
  const handleChange = useCallback(
@@ -79,6 +81,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
                id={SuperEditorContentId}
                className={classNames('ContentEditable__root overflow-y-auto', className)}
                spellCheck={spellcheck}
+                onScroll={onScroll}
              />
              <div className="search-highlight-container pointer-events-none absolute top-0 left-0 h-full w-full" />
            </div>
--- a/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
+++ b/packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
@@ -1,7 +1,7 @@
 import Icon from '@/Components/Icon/Icon'
 import { FeaturesController } from '@/Controllers/FeaturesController'
 import { NavigationController } from '@/Controllers/Navigation/NavigationController'
-import { SmartView, SystemViewId, isSystemView } from '@standardnotes/snjs'
+import { ContentType, SmartView, SystemViewId, isSystemView } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import {
  FormEventHandler,
@@ -14,6 +14,7 @@ import {
 } from 'react'
 import { classNames } from '@standardnotes/utils'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
+import { useApplication } from '../ApplicationProvider'

 type Props = {
  view: SmartView
@@ -34,6 +35,8 @@ const getIconClass = (view: SmartView, isSelected: boolean): string => {
 }

 const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEditingSmartView }) => {
+  const application = useApplication()
+
  const [title, setTitle] = useState(view.title || '')
  const inputRef = useRef<HTMLInputElement>(null)

@@ -91,6 +94,22 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
  const isFaded = false
  const iconClass = getIconClass(view, isSelected)

+  const [conflictsCount, setConflictsCount] = useState(0)
+
+  useEffect(() => {
+    if (view.uuid !== SystemViewId.Conflicts) {
+      return
+    }
+
+    return application.streamItems(ContentType.Note, () => {
+      setConflictsCount(application.items.numberOfNotesWithConflicts())
+    })
+  }, [application, view])
+
+  if (view.uuid === SystemViewId.Conflicts && !conflictsCount) {
+    return null
+  }
+
  return (
    <>
      <div
@@ -138,6 +157,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, setEdit
          <div className={'count text-base lg:text-sm'}>
            {view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
            {view.uuid === SystemViewId.Files && tagsState.allFilesCount}
+            {view.uuid === SystemViewId.Conflicts && conflictsCount}
          </div>
        </div>