feat: Added a conflict resolution dialog and a Conflicts view for easier management of conflicts

packages/icons/src/Icons/index.ts

@@ -186,6 +186,7 @@ import SubtractIcon from './ic-subtract.svg'
 import SuperscriptIcon from './ic-superscript.svg'
 import SyncIcon from './ic-sync.svg'
 import TasksIcon from './ic-tasks.svg'
+import TextIcon from './ic-text.svg'
 import TextCircleIcon from './ic-text-circle.svg'
 import TextParagraphLongIcon from './ic-text-paragraph-long.svg'
 import ThemesFilledIcon from './ic-themes-filled.svg'
@@ -392,6 +393,7 @@ export {
   SuperscriptIcon,
   SyncIcon,
   TasksIcon,
+  TextIcon,
   TextCircleIcon,
   TextParagraphLongIcon,
   ThemesFilledIcon,

packages/models/src/Domain/Runtime/Collection/Collection.ts

@@ -187,6 +187,8 @@ export abstract class Collection<
         const conflictOf = element.content.conflict_of
         if (conflictOf) {
           this.conflictMap.establishRelationship(conflictOf, element.uuid)
+        } else if (this.conflictMap.getInverseRelationships(element.uuid).length > 0) {
+          this.conflictMap.removeFromMap(element.uuid)
         }
 
         this.referenceMap.setAllRelationships(
@@ -203,6 +205,9 @@ export abstract class Collection<
 
       if (element.deleted) {
         this.nondeletedIndex.delete(element.uuid)
+        if (this.conflictMap.getInverseRelationships(element.uuid).length > 0) {
+          this.conflictMap.removeFromMap(element.uuid)
+        }
       } else {
         this.nondeletedIndex.add(element.uuid)
       }
@@ -260,4 +265,8 @@ export abstract class Collection<
     remove(array, { uuid: element.uuid as never })
     this.typedMap[element.content_type] = array
   }
+
+  public numberOfItemsWithConflicts(): number {
+    return this.conflictMap.directMapSize
+  }
 }

packages/models/src/Domain/Runtime/Collection/Item/TagItemsIndex.ts

@@ -18,7 +18,7 @@ export class TagItemsIndex implements SNIndex {
 
   private isItemCountable = (item: ItemInterface) => {
     if (isDecryptedItem(item)) {
-      return !item.archived && !item.trashed
+      return !item.archived && !item.trashed && !item.conflictOf
     }
     return false
   }

packages/models/src/Domain/Runtime/Display/DisplayOptionsToFilters.ts

@@ -10,8 +10,9 @@ import { FilterDisplayOptions } from './DisplayOptions'
 export function computeUnifiedFilterForDisplayOptions(
   options: FilterDisplayOptions,
   collection: ReferenceLookupCollection,
+  additionalFilters: ItemFilter[] = [],
 ): ItemFilter {
-  const filters = computeFiltersForDisplayOptions(options, collection)
+  const filters = computeFiltersForDisplayOptions(options, collection).concat(additionalFilters)
 
   return (item: SearchableDecryptedItem) => {
     return itemPassesFilters(item, filters)
@@ -74,5 +75,9 @@ export function computeFiltersForDisplayOptions(
     filters.push((item) => itemMatchesQuery(item, query, collection))
   }
 
+  if (!viewsPredicate?.keypathIncludesString('conflict_of')) {
+    filters.push((item) => !item.conflictOf)
+  }
+
   return filters
 }

packages/models/src/Domain/Syncable/SmartView/SmartViewBuilder.ts

@@ -85,7 +85,19 @@ export function BuildSmartViews(options: FilterDisplayOptions): SmartView[] {
     }),
   )
 
-  return [notes, files, starred, archived, trash, untagged]
+  const conflicts = new SmartView(
+    new DecryptedPayload({
+      uuid: SystemViewId.Conflicts,
+      content_type: ContentType.SmartView,
+      ...PayloadTimestampDefaults(),
+      content: FillItemContent<SmartViewContent>({
+        title: 'Conflicts',
+        predicate: conflictsPredicate(options).toJson(),
+      }),
+    }),
+  )
+
+  return [notes, files, starred, archived, trash, untagged, conflicts]
 }
 
 function allNotesPredicate(options: FilterDisplayOptions) {
@@ -203,3 +215,26 @@ function starredNotesPredicate(options: FilterDisplayOptions) {
 
   return predicate
 }
+
+function conflictsPredicate(options: FilterDisplayOptions) {
+  const subPredicates: Predicate<SNNote>[] = [new Predicate('content_type', '=', ContentType.Note)]
+
+  if (options.includeTrashed === false) {
+    subPredicates.push(new Predicate('trashed', '=', false))
+  }
+
+  if (options.includeArchived === false) {
+    subPredicates.push(new Predicate('archived', '=', false))
+  }
+
+  if (options.includeProtected === false) {
+    subPredicates.push(new Predicate('protected', '=', false))
+  }
+
+  if (options.includePinned === false) {
+    subPredicates.push(new Predicate('pinned', '=', false))
+  }
+
+  const predicate = new CompoundPredicate('and', subPredicates)
+  return predicate
+}

packages/models/src/Domain/Syncable/SmartView/SmartViewIcons.ts

@@ -8,6 +8,7 @@ export const SmartViewIcons: Record<SystemViewId, IconType> = {
   [SystemViewId.TrashedNotes]: 'trash',
   [SystemViewId.UntaggedNotes]: 'hashtag-off',
   [SystemViewId.StarredNotes]: 'star-filled',
+  [SystemViewId.Conflicts]: 'merge',
 }
 
 export function systemViewIcon(id: SystemViewId): IconType {

packages/models/src/Domain/Syncable/SmartView/SystemViewId.ts

@@ -5,4 +5,5 @@ export enum SystemViewId {
   TrashedNotes = 'trashed-notes',
   UntaggedNotes = 'untagged-notes',
   StarredNotes = 'starred-notes',
+  Conflicts = 'conflicts',
 }

packages/services/src/Domain/Item/ItemCounter.ts

@@ -23,7 +23,7 @@ export class ItemCounter implements ItemCounterInterface {
 
         continue
       }
-      if (item.content_type === ContentType.Note) {
+      if (item.content_type === ContentType.Note && !item.conflictOf) {
         counts.notes++
 
         continue

packages/services/src/Domain/Item/ItemsClientInterface.ts

@@ -167,4 +167,6 @@ export interface ItemsClientInterface {
     predicate: PredicateInterface<T>,
     iconString?: string,
   ): Promise<SmartView>
+
+  numberOfNotesWithConflicts(): number
 }

packages/snjs/lib/Services/Items/ItemManager.ts

@@ -123,6 +123,7 @@ export class ItemManager
 
   public setPrimaryItemDisplayOptions(options: Models.DisplayOptions): void {
     const override: Models.FilterDisplayOptions = {}
+    const additionalFilters: Models.ItemFilter[] = []
 
     if (options.views && options.views.find((view) => view.uuid === Models.SystemViewId.AllNotes)) {
       if (options.includeArchived === undefined) {
@@ -142,6 +143,9 @@ export class ItemManager
         override.includeArchived = true
       }
     }
+    if (options.views && options.views.find((view) => view.uuid === Models.SystemViewId.Conflicts)) {
+      additionalFilters.push((item) => this.collection.conflictsOf(item.uuid).length > 0)
+    }
 
     this.rebuildSystemSmartViews({ ...options, ...override })
 
@@ -174,7 +178,7 @@ export class ItemManager
     }
 
     this.navigationDisplayController.setDisplayOptions({
-      customFilter: Models.computeUnifiedFilterForDisplayOptions(updatedOptions, this.collection),
+      customFilter: Models.computeUnifiedFilterForDisplayOptions(updatedOptions, this.collection, additionalFilters),
       ...updatedOptions,
     })
   }
@@ -1410,4 +1414,8 @@ export class ItemManager
       },
     })
   }
+
+  numberOfNotesWithConflicts(): number {
+    return this.collection.numberOfItemsWithConflicts()
+  }
 }

packages/styles/src/Styles/_scrollbar.scss

@@ -1,7 +1,8 @@
 .windows-web,
 .windows-desktop,
 .linux-web,
-.linux-desktop {
+.linux-desktop,
+.force-custom-scrollbar {
   $thumb-width: 4px;
 
   ::-webkit-scrollbar {

packages/utils/src/Domain/Uuid/UuidMap.ts

@@ -10,6 +10,14 @@ export class UuidMap {
   /** uuid to uuids that have a relationship with us */
   private inverseMap: Partial<Record<string, string[]>> = {}
 
+  public get directMapSize(): number {
+    return Object.keys(this.directMap).length
+  }
+
+  public get inverseMapSize(): number {
+    return Object.keys(this.inverseMap).length
+  }
+
   public makeCopy(): UuidMap {
     const copy = new UuidMap()
     copy.directMap = Object.assign({}, this.directMap)

packages/web/package.json

@@ -107,8 +107,9 @@
     "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
-    "@ariakit/react": "^0.2.1",
+    "@ariakit/react": "^0.2.8",
     "@lexical/headless": "0.11.0",
-    "@radix-ui/react-slot": "^1.0.1"
+    "@radix-ui/react-slot": "^1.0.1",
+    "fast-diff": "^1.3.0"
   }
 }

packages/web/src/components/assets/org.standardnotes.theme-focus/index.css

@@ -19,15 +19,15 @@
   --sn-stylekit-neutral-contrast-color: #ffffff;
   --sn-stylekit-success-color: #2b9612;
   --sn-stylekit-success-contrast-color: #ffffff;
-  --sn-stylekit-warning-color: #f6a200;
+  --sn-stylekit-warning-color: #cc8800;
   --sn-stylekit-warning-contrast-color: #ffffff;
   --sn-stylekit-danger-color: #f80324;
   --sn-stylekit-danger-contrast-color: #ffffff;
   --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);
   --sn-stylekit-editor-foreground-color: var(--sn-stylekit-foreground-color);
   --sn-stylekit-background-color: var(--background-color);
   --sn-stylekit-foreground-color: var(--foreground-color);
-  --sn-stylekit-border-color: #000000;
+  --sn-stylekit-border-color: #181a1b;
   --sn-stylekit-contrast-background-color: #000000;
   --sn-stylekit-contrast-foreground-color: #ffffff;
   --sn-stylekit-contrast-border-color: #000000;

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'> {

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

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,

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"