feat(EE): resolve comments (#1420)

* feat: resolve comment (EE)

* Add resolve to comment mark in editor (EE)

* comment ui permissions

* sticky comment state tabs (EE)

* cleanup

* feat: add space_id to comments and allow space admins to delete any comment

- Add space_id column to comments table with data migration from pages
- Add last_edited_by_id, resolved_by_id, and updated_at columns to comments
- Update comment deletion permissions to allow space admins to delete any comment
- Backfill space_id on old comments

* fix foreign keys

apps/client/src/features/editor/page-editor.tsx

@@ -75,7 +75,7 @@ export default function PageEditor({
   const [isLocalSynced, setLocalSynced] = useState(false);
   const [isRemoteSynced, setRemoteSynced] = useState(false);
   const [yjsConnectionStatus, setYjsConnectionStatus] = useAtom(
-    yjsConnectionStatusAtom,
+    yjsConnectionStatusAtom
   );
   const menuContainerRef = useRef(null);
   const documentName = `page.${pageId}`;
@@ -262,7 +262,7 @@ export default function PageEditor({
         debouncedUpdateContent(editorJson);
       },
     },
-    [pageId, editable, remoteProvider],
+    [pageId, editable, remoteProvider]
   );
 
   const debouncedUpdateContent = useDebouncedCallback((newContent: any) => {
@@ -278,7 +278,12 @@ export default function PageEditor({
   }, 3000);
 
   const handleActiveCommentEvent = (event) => {
-    const { commentId } = event.detail;
+    const { commentId, resolved } = event.detail;
+
+    if (resolved) {
+      return;
+    }
+
     setActiveCommentId(commentId);
     setAsideState({ tab: "comments", isAsideOpen: true });
 
@@ -295,7 +300,7 @@ export default function PageEditor({
     return () => {
       document.removeEventListener(
         "ACTIVE_COMMENT_EVENT",
-        handleActiveCommentEvent,
+        handleActiveCommentEvent
       );
     };
   }, []);

apps/client/src/features/editor/styles/core.css

@@ -142,6 +142,11 @@
   .comment-mark {
     background: rgba(255, 215, 0, 0.14);
     border-bottom: 2px solid rgb(166, 158, 12);
+
+    &.resolved {
+      background: none;
+      border-bottom: none;
+    }
   }
 
   .comment-highlight {
@@ -187,7 +192,7 @@
   mask-size: 100% 100%;
   background-color: currentColor;
 
-  & -open {
+  &-open {
     --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3v2H5v14h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7.586 2H13V3h8v8h-2V6.414l-7 7L10.586 12z'/%3E%3C/svg%3E");
   }