basic comments resolution (#4594)

editor/liveblocks.config.ts

@@ -78,14 +78,14 @@ export type RoomEvent = {
 // Optionally, when using Comments, ThreadMetadata represents metadata on
 // each thread. Can only contain booleans, strings, and numbers.
 export type ThreadMetadata = {
-  // resolved: boolean;
   // quote: string;
   // time: number;
   type: 'canvas'
   x: number // x and y is global when sceneId is undefined, and local to the scene when sceneId is not null
   y: number
   sceneId?: string
   remixLocationRoute?: string
+  resolved: boolean
 }
 
 export const {

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -5,10 +5,11 @@ import type { ThreadData } from '@liveblocks/client'
 import { useAtom } from 'jotai'
 import React from 'react'
 import type { ThreadMetadata } from '../../../../liveblocks.config'
-import { useEditThreadMetadata, useStorage, useThreads } from '../../../../liveblocks.config'
+import { useEditThreadMetadata, useStorage } from '../../../../liveblocks.config'
 import {
   useCanvasLocationOfThread,
   useIsOnAnotherRemixRoute,
+  useActiveThreads,
 } from '../../../core/commenting/comment-hooks'
 import type { CanvasPoint, CanvasVector, WindowPoint } from '../../../core/shared/math-utils'
 import {
@@ -55,7 +56,7 @@ export const CommentIndicators = React.memo(() => {
 CommentIndicators.displayName = 'CommentIndicators'
 
 const CommentIndicatorsInner = React.memo(() => {
-  const { threads } = useThreads()
+  const threads = useActiveThreads()
 
   return (
     <React.Fragment>
@@ -138,7 +139,8 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
         position: 'fixed',
         top: position.y,
         left: position.x,
-        opacity: isOnAnotherRoute ? 0.25 : 1,
+        opacity: isOnAnotherRoute || thread.metadata.resolved ? 0.25 : 1,
+        filter: thread.metadata.resolved ? 'grayscale(1)' : undefined,
         width: IndicatorSize,
         '&:hover': {
           transform: 'scale(1.15)',

editor/src/components/canvas/controls/comment-popup.tsx

@@ -76,6 +76,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
             return createThread({
               body,
               metadata: {
+                resolved: false,
                 type: 'canvas',
                 x: comment.location.position.x,
                 y: comment.location.position.y,
@@ -86,6 +87,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
             return createThread({
               body,
               metadata: {
+                resolved: false,
                 type: 'canvas',
                 x: comment.location.offset.x,
                 y: comment.location.offset.y,

editor/src/components/editor/action-types.ts

@@ -1077,6 +1077,11 @@ export interface UpdateImportsFromCollaborationUpdate {
   imports: MapLike<ImportDetails>
 }
 
+export interface SetShowResolvedThreads {
+  action: 'SET_SHOW_RESOLVED_THREADS'
+  showResolvedThreads: boolean
+}
+
 export type EditorAction =
   | ClearSelection
   | InsertJSXElement
@@ -1251,6 +1256,7 @@ export type EditorAction =
   | UpdateTopLevelElementsFromCollaborationUpdate
   | UpdateExportsDetailFromCollaborationUpdate
   | UpdateImportsFromCollaborationUpdate
+  | SetShowResolvedThreads
 
 export type DispatchPriority =
   | 'everyone'

editor/src/components/editor/actions/action-creators.ts

@@ -225,6 +225,7 @@ import type {
   DeleteFileFromCollaboration,
   UpdateExportsDetailFromCollaborationUpdate,
   UpdateImportsFromCollaborationUpdate,
+  SetShowResolvedThreads,
 } from '../action-types'
 import type { InsertionSubjectWrapper, Mode } from '../editor-modes'
 import { EditorModes, insertionSubject } from '../editor-modes'
@@ -1707,3 +1708,10 @@ export function updateImportsFromCollaborationUpdate(
     imports: imports,
   }
 }
+
+export function setShowResolvedThreads(showResolvedThreads: boolean): SetShowResolvedThreads {
+  return {
+    action: 'SET_SHOW_RESOLVED_THREADS',
+    showResolvedThreads: showResolvedThreads,
+  }
+}

editor/src/components/editor/actions/action-utils.ts

@@ -130,6 +130,7 @@ export function isTransientAction(action: EditorAction): boolean {
     case 'START_POST_ACTION_SESSION':
     case 'TRUNCATE_HISTORY':
     case 'UPDATE_PROJECT_SERVER_STATE':
+    case 'SET_SHOW_RESOLVED_THREADS':
       return true
 
     case 'TRUE_UP_ELEMENTS':

editor/src/components/editor/actions/actions.tsx

@@ -317,6 +317,7 @@ import type {
   DeleteFileFromCollaboration,
   UpdateExportsDetailFromCollaborationUpdate,
   UpdateImportsFromCollaborationUpdate,
+  SetShowResolvedThreads,
 } from '../action-types'
 import { isLoggedIn } from '../action-types'
 import type { Mode } from '../editor-modes'
@@ -920,6 +921,7 @@ export function restoreEditorState(
     internalClipboard: currentEditor.internalClipboard,
     filesModifiedByAnotherUser: currentEditor.filesModifiedByAnotherUser,
     activeFrames: currentEditor.activeFrames,
+    showResolvedThreads: currentEditor.showResolvedThreads,
   }
 }
 
@@ -5527,6 +5529,9 @@ export const UPDATE_FNS = {
       }
     }
   },
+  SET_SHOW_RESOLVED_THREADS: (action: SetShowResolvedThreads, editor: EditorModel): EditorModel => {
+    return { ...editor, showResolvedThreads: action.showResolvedThreads }
+  },
 }
 
 function copySelectionToClipboardMutating(

editor/src/components/editor/store/editor-state.ts

@@ -1479,6 +1479,7 @@ export interface EditorState {
   internalClipboard: InternalClipboard
   filesModifiedByAnotherUser: Array<string>
   activeFrames: ActiveFrame[]
+  showResolvedThreads: boolean
 }
 
 export function editorState(
@@ -1561,6 +1562,7 @@ export function editorState(
   internalClipboardData: InternalClipboard,
   filesModifiedByAnotherUser: Array<string>,
   activeFrames: ActiveFrame[],
+  showResolvedThreads: boolean,
 ): EditorState {
   return {
     id: id,
@@ -1642,6 +1644,7 @@ export function editorState(
     internalClipboard: internalClipboardData,
     filesModifiedByAnotherUser: filesModifiedByAnotherUser,
     activeFrames: activeFrames,
+    showResolvedThreads: showResolvedThreads,
   }
 }
 
@@ -2518,6 +2521,7 @@ export function createEditorState(dispatch: EditorDispatch): EditorState {
     },
     filesModifiedByAnotherUser: [],
     activeFrames: [],
+    showResolvedThreads: false,
   }
 }
 
@@ -2894,6 +2898,7 @@ export function editorModelFromPersistentModel(
     },
     filesModifiedByAnotherUser: [],
     activeFrames: [],
+    showResolvedThreads: false,
   }
   return editor
 }

editor/src/components/editor/store/editor-update.tsx

@@ -399,6 +399,8 @@ export function runSimpleLocalEditorAction(
       return UPDATE_FNS.UPDATE_EXPORTS_DETAIL_FROM_COLLABORATION_UPDATE(action, state, serverState)
     case 'UPDATE_IMPORTS_FROM_COLLABORATION_UPDATE':
       return UPDATE_FNS.UPDATE_IMPORTS_FROM_COLLABORATION_UPDATE(action, state, serverState)
+    case 'SET_SHOW_RESOLVED_THREADS':
+      return UPDATE_FNS.SET_SHOW_RESOLVED_THREADS(action, state)
     default:
       return state
   }

editor/src/components/editor/store/store-deep-equality-instances.ts

@@ -4570,6 +4570,11 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     newValue.activeFrames,
   )
 
+  const showResolvedThreadsResults = BooleanKeepDeepEquality(
+    oldValue.showResolvedThreads,
+    newValue.showResolvedThreads,
+  )
+
   const areEqual =
     idResult.areEqual &&
     vscodeBridgeIdResult.areEqual &&
@@ -4648,7 +4653,8 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
     colorSwatchesResults.areEqual &&
     internalClipboardResults.areEqual &&
     filesModifiedByAnotherUserResults.areEqual &&
-    activeFramesResults.areEqual
+    activeFramesResults.areEqual &&
+    showResolvedThreadsResults.areEqual
 
   if (areEqual) {
     return keepDeepEqualityResult(oldValue, true)
@@ -4733,6 +4739,7 @@ export const EditorStateKeepDeepEquality: KeepDeepEqualityCall<EditorState> = (
       internalClipboardResults.value,
       filesModifiedByAnotherUserResults.value,
       activeFramesResults.value,
+      showResolvedThreadsResults.value,
     )
 
     return keepDeepEqualityResult(newEditorState, false)

editor/src/components/editor/store/store-hook-substore-helpers.ts

@@ -173,4 +173,5 @@ export const EmptyEditorStateForKeysOnly: EditorState = {
   },
   filesModifiedByAnotherUser: [],
   activeFrames: [],
+  showResolvedThreads: false,
 }

editor/src/components/inspector/sections/comment-section.tsx

@@ -1,14 +1,23 @@
 import '@liveblocks/react-comments/styles.css'
 import React from 'react'
-import { FlexColumn, FlexRow, InspectorSubsectionHeader, useColorTheme } from '../../../uuiui'
+import {
+  Button,
+  FlexColumn,
+  FlexRow,
+  InspectorSubsectionHeader,
+  useColorTheme,
+} from '../../../uuiui'
 import { Comment } from '@liveblocks/react-comments'
 import { stopPropagation } from '../common/inspector-utils'
 import type { ThreadMetadata } from '../../../../liveblocks.config'
-import { useThreads } from '../../../../liveblocks.config'
 import type { ThreadData } from '@liveblocks/client'
 import { useDispatch } from '../../editor/store/dispatch-context'
 import { canvasPoint, canvasRectangle } from '../../../core/shared/math-utils'
-import { scrollToPosition, switchEditorMode } from '../../editor/actions/action-creators'
+import {
+  scrollToPosition,
+  setShowResolvedThreads,
+  switchEditorMode,
+} from '../../editor/actions/action-creators'
 import {
   EditorModes,
   existingComment,
@@ -18,9 +27,14 @@ import {
 import { MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
 import { useAtom } from 'jotai'
 import { RemixNavigationAtom } from '../../canvas/remix/utopia-remix-root-component'
-import { useIsOnAnotherRemixRoute } from '../../../core/commenting/comment-hooks'
+import {
+  useUnresolvedThreads,
+  useIsOnAnotherRemixRoute,
+  useResolveThread,
+  useResolvedThreads,
+} from '../../../core/commenting/comment-hooks'
 import { Substores, useEditorState } from '../../editor/store/store-hook'
-import { when } from '../../../utils/react-conditionals'
+import { unless, when } from '../../../utils/react-conditionals'
 
 export const CommentSection = React.memo(() => {
   return (
@@ -45,13 +59,43 @@ export const CommentSection = React.memo(() => {
 CommentSection.displayName = 'CommentSection'
 
 const ThreadPreviews = React.memo(() => {
-  const { threads } = useThreads()
+  const dispatch = useDispatch()
+  const { threads: activeThreads } = useUnresolvedThreads()
+  const { threads: resolvedThreads } = useResolvedThreads()
+
+  const showResolved = useEditorState(
+    Substores.restOfEditor,
+    (store) => store.editor.showResolvedThreads,
+    'ThreadPreviews showResolvedThreads',
+  )
+
+  const toggleShowResolved = React.useCallback(() => {
+    dispatch([
+      setShowResolvedThreads(!showResolved),
+      switchEditorMode(EditorModes.selectMode(null, false, 'none')),
+    ])
+  }, [showResolved, dispatch])
 
   return (
     <FlexColumn style={{ gap: 5 }}>
-      {threads.map((thread) => (
+      {activeThreads.map((thread) => (
         <ThreadPreview key={thread.id} thread={thread} />
       ))}
+      {when(
+        resolvedThreads.length > 0,
+        <Button
+          highlight
+          spotlight
+          style={{ padding: 10, margin: '10px' }}
+          onClick={toggleShowResolved}
+        >
+          {showResolved ? 'Hide' : 'Show'} resolved threads
+        </Button>,
+      )}
+      {when(
+        showResolved,
+        resolvedThreads.map((thread) => <ThreadPreview key={thread.id} thread={thread} />),
+      )}
     </FlexColumn>
   )
 })
@@ -100,6 +144,17 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
     ])
   }, [dispatch, remixNavigationState, isOnAnotherRoute, remixLocationRoute, point, thread.id])
 
+  const resolveThread = useResolveThread()
+
+  const onResolveThread = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      resolveThread(thread)
+      dispatch([switchEditorMode(EditorModes.selectMode(null, false, 'none'))])
+    },
+    [resolveThread, dispatch, thread],
+  )
+
   const comment = thread.comments[0]
   if (comment == null) {
     return null
@@ -110,23 +165,42 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
     <div
       key={comment.id}
       onClick={onClick}
-      style={{ backgroundColor: isSelected ? `${colorTheme.primary10.value}` : 'transparent' }}
+      style={{
+        backgroundColor: isSelected
+          ? colorTheme.primary10.value
+          : thread.metadata.resolved
+          ? colorTheme.bg2.value
+          : 'transparent',
+      }}
     >
       <Comment comment={comment} showActions={false} style={{ backgroundColor: 'transparent' }} />
-      {when(
-        repliesCount > 0,
-        <div
-          style={{
-            paddingBottom: 10,
-            paddingLeft: 44,
-            fontSize: 9,
-            color: colorTheme.fg6.value,
-            marginTop: -5,
-          }}
-        >
-          {repliesCount} {repliesCount > 1 ? 'replies' : 'reply'}
-        </div>,
-      )}
+      <div
+        style={{
+          paddingBottom: 10,
+          paddingLeft: 44,
+          paddingRight: 10,
+          marginTop: -5,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        {when(
+          repliesCount > 0,
+          <div
+            style={{
+              fontSize: 9,
+              color: colorTheme.fg6.value,
+            }}
+          >
+            {repliesCount} {repliesCount > 1 ? 'replies' : 'reply'}
+          </div>,
+        )}
+        {unless(repliesCount > 0, <div />)}
+        <Button highlight spotlight style={{ padding: '0 6px' }} onClick={onResolveThread}>
+          {thread.metadata.resolved ? 'Unresolve' : 'Resolve'}
+        </Button>
+      </div>
     </div>
   )
 })