🏗️(frontend) move comments to its own folder feature

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to
 - ✨(backend) add a breadcrumb in the search response
 - ♻️(frontend) move doc action buttons to fix toolbar #2360
 - ♿️(frontend) add aria-hidden to decorative avatar SVGs in share modal #2324
+- 🏗️(frontend) move comments to its own folder feature #2374
 
 ### Fixed
 

src/frontend/apps/impress/package.json

@@ -24,15 +24,15 @@
   "dependencies": {
     "@ag-media/react-pdf-table": "2.0.3",
     "@ai-sdk/openai": "3.0.65",
-    "@blocknote/code-block": "0.51.2",
-    "@blocknote/core": "0.51.2",
-    "@blocknote/mantine": "0.51.2",
-    "@blocknote/react": "0.51.2",
-    "@blocknote/xl-ai": "0.51.2",
-    "@blocknote/xl-docx-exporter": "0.51.2",
-    "@blocknote/xl-multi-column": "0.51.2",
-    "@blocknote/xl-odt-exporter": "0.51.2",
-    "@blocknote/xl-pdf-exporter": "0.51.2",
+    "@blocknote/code-block": "0.51.4",
+    "@blocknote/core": "0.51.4",
+    "@blocknote/mantine": "0.51.4",
+    "@blocknote/react": "0.51.4",
+    "@blocknote/xl-ai": "0.51.4",
+    "@blocknote/xl-docx-exporter": "0.51.4",
+    "@blocknote/xl-multi-column": "0.51.4",
+    "@blocknote/xl-odt-exporter": "0.51.4",
+    "@blocknote/xl-pdf-exporter": "0.51.4",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@emoji-mart/data": "1.2.1",

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStore.tsx → src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStore.tsx

@@ -5,16 +5,16 @@ import * as Y from 'yjs';
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Doc } from '@/features/docs/doc-management';
 
-import { useEditorStore } from '../../stores';
-
-import { DocsThreadStoreAuth } from './DocsThreadStoreAuth';
+import { useEditorStore } from '../../doc-editor/stores';
 import {
   ClientCommentData,
   ClientThreadData,
   ServerComment,
   ServerReaction,
   ServerThread,
-} from './types';
+} from '../types';
+
+import { DocsThreadStoreAuth } from './DocsThreadStoreAuth';
 
 type ServerThreadListResponse = ServerThread[];
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx → src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStoreAuth.tsx

@@ -1,6 +1,6 @@
 import { ThreadStoreAuth } from '@blocknote/core/comments';
 
-import { ClientCommentData, ClientThreadData } from './types';
+import { ClientCommentData, ClientThreadData } from '../types';
 
 export class DocsThreadStoreAuth extends ThreadStoreAuth {
   constructor(

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx → src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentSideBar.tsx

@@ -15,7 +15,7 @@ import { Box, ButtonCloseModal, Text } from '@/components/';
 import { useRightPanelStore } from '@/features/right-panel/stores/useRightPanelStore';
 import { useFocusStore } from '@/stores';
 
-import { useCommentSidebarStore } from './useCommentSidebarStore';
+import { useCommentSidebarStore } from '../stores/useCommentSidebarStore';
 
 interface CommentSideBarProps {
   onClose: () => void;

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx → src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentToolbarButton.tsx

@@ -19,12 +19,6 @@ import { Box, Icon } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useDocStore } from '@/features/docs/doc-management';
 
-import {
-  DocsBlockSchema,
-  DocsInlineContentSchema,
-  DocsStyleSchema,
-} from '../../types';
-
 export const CommentToolbarButton = () => {
   const Components = useComponentsContext();
   const { currentDoc } = useDocStore();
@@ -35,12 +29,7 @@ export const CommentToolbarButton = () => {
   >;
   const { store } = useExtension(FormattingToolbarExtension);
 
-  const editor = useBlockNoteEditor<
-    DocsBlockSchema,
-    DocsInlineContentSchema,
-    DocsStyleSchema
-  >();
-
+  const editor = useBlockNoteEditor();
   const selectedBlocks = useSelectedBlocks(editor);
 
   const show = useMemo(() => {

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts → src/frontend/apps/impress/src/features/docs/doc-comments/hooks/useComments.ts

@@ -3,11 +3,11 @@ import { useTranslation } from 'react-i18next';
 
 import { useCunninghamTheme } from '@/cunningham';
 import { User, avatarUrlFromName } from '@/features/auth';
-import { useEditorStore } from '@/features/docs/doc-editor/stores';
 import { Doc, useProviderStore } from '@/features/docs/doc-management';
 
-import { DocsThreadStore } from './DocsThreadStore';
-import { DocsThreadStoreAuth } from './DocsThreadStoreAuth';
+import { DocsThreadStore } from '../api/DocsThreadStore';
+import { DocsThreadStoreAuth } from '../api/DocsThreadStoreAuth';
+import { useThreadStore } from '../stores/useThreadStore';
 
 export function useComments(
   docId: Doc['id'],
@@ -17,7 +17,7 @@ export function useComments(
   const { provider } = useProviderStore();
   const { t } = useTranslation();
   const { themeTokens } = useCunninghamTheme();
-  const { setThreadStore } = useEditorStore();
+  const { setThreadStore } = useThreadStore();
 
   const threadStore = useMemo(() => {
     return new DocsThreadStore(

src/frontend/apps/impress/src/features/docs/doc-comments/index.ts

@@ -0,0 +1,4 @@
+export * from './components/CommentToolbarButton';
+export * from './styles';
+export * from './stores/useCommentSidebarStore';
+export * from './hooks/useComments';

src/frontend/apps/impress/src/features/docs/doc-comments/stores/useThreadStore.tsx

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+import type { DocsThreadStore } from '../api/DocsThreadStore';
+
+export interface UseThreadStore {
+  threadStore?: DocsThreadStore;
+  setThreadStore: (threadStore: DocsThreadStore | undefined) => void;
+}
+
+export const useThreadStore = create<UseThreadStore>((set) => ({
+  threadStore: undefined,
+  setThreadStore: (threadStore) => {
+    set({ threadStore });
+  },
+}));

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -27,6 +27,11 @@ import * as Y from 'yjs';
 import { Box, TextErrors } from '@/components';
 import { useConfig } from '@/core';
 import { useCunninghamTheme } from '@/cunningham';
+import {
+  DocsCommentsStyle,
+  useCommentSidebarStore,
+  useComments,
+} from '@/docs/doc-comments';
 import { Doc } from '@/docs/doc-management';
 import { avatarUrlFromName, useAuth } from '@/features/auth';
 import { useRightPanelStore } from '@/features/right-panel/stores/useRightPanelStore';
@@ -48,11 +53,6 @@ import { randomColor, sanitizeColor } from '../utils';
 import BlockNoteAI from './AI';
 import { BlockNoteSuggestionMenu } from './BlockNoteSuggestionMenu';
 import { BlockNoteToolbar } from './BlockNoteToolBar/BlockNoteToolbar';
-import {
-  DocsCommentsStyle,
-  useCommentSidebarStore,
-  useComments,
-} from './comments/';
 import { CalloutBlock, PdfBlock, UploadLoaderBlock } from './custom-blocks';
 const AIMenu = BlockNoteAI?.AIMenu;
 const AIMenuController = BlockNoteAI?.AIMenuController;

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx

@@ -10,10 +10,10 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useConfig } from '@/core/config/api';
+import { CommentToolbarButton } from '@/docs/doc-comments/components/CommentToolbarButton';
 
 import BlockNoteAI from '../AI/';
 import { AIGroupButton } from '../AI/AIButtonMIT';
-import { CommentToolbarButton } from '../comments/CommentToolbarButton';
 import { getCalloutFormattingToolbarItems } from '../custom-blocks';
 
 import { FileDownloadButton } from './FileDownloadButton';

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx

@@ -2,10 +2,10 @@ import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as Y from 'yjs';
 
-import { COMMENT_UPDATE_ORIGIN } from '@/docs/doc-editor/components/comments/DocsThreadStore';
 import { useDocContentUpdate } from '@/docs/doc-management/api/useDocContentUpdate';
 import { useProviderStore } from '@/docs/doc-management/stores/useProviderStore';
 import { KEY_LIST_DOC_VERSIONS } from '@/docs/doc-versioning/api/useDocVersions';
+import { COMMENT_UPDATE_ORIGIN } from '@/features/docs/doc-comments/api/DocsThreadStore';
 import { useIsOffline } from '@/features/service-worker';
 import { toBase64 } from '@/utils/string';
 import { isFirefox } from '@/utils/userAgent';

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx

@@ -1,22 +1,15 @@
 import { create } from 'zustand';
 
-import type { DocsThreadStore } from '../components/comments/DocsThreadStore';
 import { DocsBlockNoteEditor } from '../types';
 
 export interface UseEditorstore {
   editor?: DocsBlockNoteEditor;
-  threadStore?: DocsThreadStore;
   setEditor: (editor: DocsBlockNoteEditor | undefined) => void;
-  setThreadStore: (threadStore: DocsThreadStore | undefined) => void;
 }
 
 export const useEditorStore = create<UseEditorstore>((set) => ({
   editor: undefined,
-  threadStore: undefined,
   setEditor: (editor) => {
     set({ editor });
   },
-  setThreadStore: (threadStore) => {
-    set({ threadStore });
-  },
 }));

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';
 
 import { Box, Text } from '@/components';
-import { useEditorStore } from '@/docs/doc-editor/stores';
+import { useThreadStore } from '@/docs/doc-comments/stores/useThreadStore';
 import { Doc, base64ToYDoc, useProviderStore } from '@/docs/doc-management/';
 import { useDocContentUpdate } from '@/docs/doc-management/api/useDocContentUpdate';
 
@@ -44,7 +44,7 @@ export const ModalConfirmationVersion = ({
   const { t } = useTranslation();
   const { toast } = useToastProvider();
   const { provider } = useProviderStore();
-  const { threadStore } = useEditorStore();
+  const { threadStore } = useThreadStore();
   const { mutate: updateDocContent } = useDocContentUpdate({
     listInvalidQueries: [KEY_LIST_DOC_VERSIONS],
     onSuccess: () => {

src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import { Box } from '@/components';
-import { CommentSideBar } from '@/features/docs/doc-editor/components/comments/CommentSideBar';
+import { CommentSideBar } from '@/features/docs/doc-comments/components/CommentSideBar';
 import { useDocStore, useProviderStore } from '@/features/docs/doc-management';
 import { TableContentSideBar } from '@/features/docs/doc-table-content/components/TableContentSideBar';
 import { HEADER_HEIGHT } from '@/features/header';

src/frontend/apps/impress/src/features/right-panel/components/RightPanelCollapseButton.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import { CommentSideBarButton } from '@/features/docs/doc-editor/components/comments/CommentSideBar';
-import { useEditorStore } from '@/features/docs/doc-editor/stores/useEditorStore';
-import { useHeadingStore } from '@/features/docs/doc-editor/stores/useHeadingStore';
-import { TableContentSideBarButton } from '@/features/docs/doc-table-content/components/TableContentSideBar';
+import { CommentSideBarButton } from '@/docs/doc-comments/components/CommentSideBar';
+import { useThreadStore } from '@/docs/doc-comments/stores/useThreadStore';
+import { useHeadingStore } from '@/docs/doc-editor/stores/useHeadingStore';
+import { TableContentSideBarButton } from '@/docs/doc-table-content/components/TableContentSideBar';
 
 export const RightPanelCollapseButton = () => {
-  const { threadStore } = useEditorStore();
+  const { threadStore } = useThreadStore();
   const [hasThreads, setHasThreads] = useState(
     !!threadStore?.getThreads().size,
   );

src/frontend/servers/y-provider/package.json

@@ -16,7 +16,7 @@
     "node": ">=22"
   },
   "dependencies": {
-    "@blocknote/server-util": "0.51.2",
+    "@blocknote/server-util": "0.51.4",
     "@hocuspocus/server": "3.4.4",
     "@sentry/node": "10.53.1",
     "@sentry/profiling-node": "10.53.1",
@@ -30,7 +30,7 @@
     "yjs": "*"
   },
   "devDependencies": {
-    "@blocknote/core": "0.51.2",
+    "@blocknote/core": "0.51.4",
     "@hocuspocus/provider": "3.4.4",
     "@types/cors": "2.8.19",
     "@types/express": "5.0.6",