whether resolved sync to canvas

web/app/components/workflow/index.tsx

@@ -261,7 +261,6 @@ export const Workflow: FC<WorkflowProps> = memo(({
     handleActiveCommentClose,
     handleCommentResolve,
     handleCommentDelete,
-    handleCommentNavigate,
     handleCommentReply,
     handleCommentReplyUpdate,
     handleCommentReplyDelete,
@@ -269,10 +268,26 @@ export const Workflow: FC<WorkflowProps> = memo(({
   } = useWorkflowComment()
   const showUserComments = useStore(s => s.showUserComments)
   const showUserCursors = useStore(s => s.showUserCursors)
+  const showResolvedComments = useStore(s => s.showResolvedComments)
   const isCommentPreviewHovering = useStore(s => s.isCommentPreviewHovering)
   const setPendingCommentState = useStore(s => s.setPendingComment)
   const isCommentInputActive = Boolean(pendingComment)
   const { t } = useTranslation()
+  const visibleComments = useMemo(() => {
+    if (showResolvedComments)
+      return comments
+    return comments.filter(comment => !comment.resolved)
+  }, [comments, showResolvedComments])
+  const handleVisibleCommentNavigate = useCallback((direction: 'prev' | 'next') => {
+    if (!activeComment)
+      return
+    const idx = visibleComments.findIndex(comment => comment.id === activeComment.id)
+    if (idx === -1)
+      return
+    const target = direction === 'prev' ? visibleComments[idx - 1] : visibleComments[idx + 1]
+    if (target)
+      handleCommentIconClick(target)
+  }, [activeComment, handleCommentIconClick, visibleComments])
 
   eventEmitter?.useSubscription((event) => {
     const workflowEvent = event as unknown as WorkflowEvent
@@ -560,12 +575,12 @@ export const Workflow: FC<WorkflowProps> = memo(({
           onPositionChange={handlePendingCommentPositionChange}
         />
       )}
-      {comments.map((comment, index) => {
+      {visibleComments.map((comment, index) => {
         const isActive = activeComment?.id === comment.id
 
         if (isActive && activeComment) {
           const canGoPrev = index > 0
-          const canGoNext = index < comments.length - 1
+          const canGoNext = index < visibleComments.length - 1
           return (
             <Fragment key={comment.id}>
               <CommentIcon
@@ -584,8 +599,8 @@ export const Workflow: FC<WorkflowProps> = memo(({
                 onClose={handleActiveCommentClose}
                 onResolve={() => handleCommentResolve(comment.id)}
                 onDelete={() => handleCommentDeleteClick(comment.id)}
-                onPrev={canGoPrev ? () => handleCommentNavigate('prev') : undefined}
-                onNext={canGoNext ? () => handleCommentNavigate('next') : undefined}
+                onPrev={canGoPrev ? () => handleVisibleCommentNavigate('prev') : undefined}
+                onNext={canGoNext ? () => handleVisibleCommentNavigate('next') : undefined}
                 onReply={(content, ids) => handleCommentReply(comment.id, content, ids ?? [])}
                 onReplyEdit={(replyId, content, ids) => handleCommentReplyUpdate(comment.id, replyId, content, ids ?? [])}
                 onReplyDelete={replyId => handleCommentReplyDeleteClick(comment.id, replyId)}

web/app/components/workflow/panel/comments-panel/index.tsx

@@ -20,13 +20,14 @@ const CommentsPanel = () => {
   const activeCommentId = useStore(s => s.activeCommentId)
   const setActiveCommentId = useStore(s => s.setActiveCommentId)
   const setControlMode = useStore(s => s.setControlMode)
+  const showResolvedComments = useStore(s => s.showResolvedComments)
+  const setShowResolvedComments = useStore(s => s.setShowResolvedComments)
   const { comments, loading, loadComments, handleCommentIconClick } = useWorkflowComment()
   const params = useParams()
   const appId = params.appId as string
   const { formatTimeFromNow } = useFormatTimeFromNow()
 
   const [showOnlyMine, setShowOnlyMine] = useState(false)
-  const [showOnlyUnresolved, setShowOnlyUnresolved] = useState(false)
   const [showFilter, setShowFilter] = useState(false)
 
   const handleSelect = useCallback((comment: WorkflowCommentList) => {
@@ -37,12 +38,12 @@ const CommentsPanel = () => {
 
   const filteredSorted = useMemo(() => {
     let data = comments
-    if (showOnlyUnresolved)
+    if (!showResolvedComments)
       data = data.filter(c => !c.resolved)
     if (showOnlyMine)
       data = data.filter(c => c.created_by === userProfile?.id)
     return data
-  }, [comments, showOnlyMine, showOnlyUnresolved, userProfile?.id])
+  }, [comments, showOnlyMine, showResolvedComments, userProfile?.id])
 
   const handleResolve = useCallback(async (comment: WorkflowCommentList) => {
     if (comment.resolved)
@@ -62,7 +63,7 @@ const CommentsPanel = () => {
     }
   }, [appId, loadComments, setActiveCommentId])
 
-  const hasActiveFilter = showOnlyMine || !showOnlyUnresolved
+  const hasActiveFilter = showOnlyMine || !showResolvedComments
 
   return (
     <div className={cn('relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg')}>
@@ -115,9 +116,9 @@ const CommentsPanel = () => {
                 <span className="text-sm text-text-secondary">Show resolved</span>
                 <Switch
                   size="md"
-                  defaultValue={!showOnlyUnresolved}
+                  defaultValue={showResolvedComments}
                   onChange={(checked) => {
-                    setShowOnlyUnresolved(!checked)
+                    setShowResolvedComments(checked)
                   }}
                 />
               </div>

web/app/components/workflow/store/workflow/comment-slice.ts

@@ -6,6 +6,8 @@ export type CommentSliceShape = {
   setComments: (comments: WorkflowCommentList[]) => void
   commentsLoading: boolean
   setCommentsLoading: (loading: boolean) => void
+  showResolvedComments: boolean
+  setShowResolvedComments: (showResolved: boolean) => void
   activeCommentDetail: WorkflowCommentDetail | null
   setActiveCommentDetail: (comment: WorkflowCommentDetail | null) => void
   activeCommentDetailLoading: boolean
@@ -27,6 +29,8 @@ export const createCommentSlice: StateCreator<CommentSliceShape> = set => ({
   setComments: comments => set({ comments }),
   commentsLoading: false,
   setCommentsLoading: commentsLoading => set({ commentsLoading }),
+  showResolvedComments: false,
+  setShowResolvedComments: showResolvedComments => set({ showResolvedComments }),
   activeCommentDetail: null,
   setActiveCommentDetail: activeCommentDetail => set({ activeCommentDetail }),
   activeCommentDetailLoading: false,