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

The feature "doc-editor" start to be quiete big,
and the comments related code is quite a lot.
We move all the comments related code to a new
folder "doc-comments" to make the code more
organized and easier to maintain.

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/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-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-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-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-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/components/comments/index.ts

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

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,
   );