From 3b7ea3eba70b8c447413c72339add37e563ddf1d Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 1 Jun 2026 17:10:29 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8F=97=EF=B8=8F(frontend)=20move=20commen?= =?UTF-8?q?ts=20to=20its=20own=20folder=20feature?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 | 1 + .../api}/DocsThreadStore.tsx | 8 ++++---- .../api}/DocsThreadStoreAuth.tsx | 2 +- .../components}/CommentSideBar.tsx | 2 +- .../components}/CommentToolbarButton.tsx | 13 +------------ .../hooks}/useComments.ts | 8 ++++---- .../src/features/docs/doc-comments/index.ts | 4 ++++ .../stores}/useCommentSidebarStore.ts | 0 .../docs/doc-comments/stores/useThreadStore.tsx | 15 +++++++++++++++ .../comments => doc-comments}/styles.tsx | 0 .../components/comments => doc-comments}/types.ts | 0 .../doc-editor/components/BlockNoteEditor.tsx | 10 +++++----- .../BlockNoteToolBar/BlockNoteToolbar.tsx | 2 +- .../docs/doc-editor/components/comments/index.ts | 4 ---- .../features/docs/doc-editor/hook/useSaveDoc.tsx | 2 +- .../docs/doc-editor/stores/useEditorStore.tsx | 7 ------- .../components/ModalConfirmationVersion.tsx | 4 ++-- .../right-panel/components/RightPanel.tsx | 2 +- .../components/RightPanelCollapseButton.tsx | 10 +++++----- 19 files changed, 46 insertions(+), 48 deletions(-) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/api}/DocsThreadStore.tsx (99%) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/api}/DocsThreadStoreAuth.tsx (96%) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/components}/CommentSideBar.tsx (98%) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/components}/CommentToolbarButton.tsx (91%) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/hooks}/useComments.ts (88%) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-comments/index.ts rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments/stores}/useCommentSidebarStore.ts (100%) create mode 100644 src/frontend/apps/impress/src/features/docs/doc-comments/stores/useThreadStore.tsx rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments}/styles.tsx (100%) rename src/frontend/apps/impress/src/features/docs/{doc-editor/components/comments => doc-comments}/types.ts (100%) delete mode 100644 src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e1cb0b45..eace8fb08 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStore.tsx similarity index 99% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStore.tsx rename to src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStore.tsx index 4fc1a2131..0a47d30ac 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStore.tsx +++ b/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[]; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStoreAuth.tsx similarity index 96% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx rename to src/frontend/apps/impress/src/features/docs/doc-comments/api/DocsThreadStoreAuth.tsx index 068a0172c..1d5f8eca9 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/DocsThreadStoreAuth.tsx +++ b/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( diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentSideBar.tsx similarity index 98% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx rename to src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentSideBar.tsx index c4b57a0d1..903941de3 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentSideBar.tsx +++ b/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; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentToolbarButton.tsx similarity index 91% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx rename to src/frontend/apps/impress/src/features/docs/doc-comments/components/CommentToolbarButton.tsx index 368649ea8..daee770fb 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/CommentToolbarButton.tsx +++ b/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(() => { diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts b/src/frontend/apps/impress/src/features/docs/doc-comments/hooks/useComments.ts similarity index 88% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts rename to src/frontend/apps/impress/src/features/docs/doc-comments/hooks/useComments.ts index 35863ff1e..ff2a4ac9e 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useComments.ts +++ b/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( diff --git a/src/frontend/apps/impress/src/features/docs/doc-comments/index.ts b/src/frontend/apps/impress/src/features/docs/doc-comments/index.ts new file mode 100644 index 000000000..f48f0e81d --- /dev/null +++ b/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'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useCommentSidebarStore.ts b/src/frontend/apps/impress/src/features/docs/doc-comments/stores/useCommentSidebarStore.ts similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/useCommentSidebarStore.ts rename to src/frontend/apps/impress/src/features/docs/doc-comments/stores/useCommentSidebarStore.ts diff --git a/src/frontend/apps/impress/src/features/docs/doc-comments/stores/useThreadStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/stores/useThreadStore.tsx new file mode 100644 index 000000000..c840845d3 --- /dev/null +++ b/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((set) => ({ + threadStore: undefined, + setThreadStore: (threadStore) => { + set({ threadStore }); + }, +})); diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-comments/styles.tsx similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx rename to src/frontend/apps/impress/src/features/docs/doc-comments/styles.tsx diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/types.ts b/src/frontend/apps/impress/src/features/docs/doc-comments/types.ts similarity index 100% rename from src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/types.ts rename to src/frontend/apps/impress/src/features/docs/doc-comments/types.ts diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 7d460adb6..be47df3d6 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/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; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx index c110772e6..d187045b5 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx +++ b/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'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts deleted file mode 100644 index 03a884dbd..000000000 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export * from './CommentToolbarButton'; -export * from './styles'; -export * from './useCommentSidebarStore'; -export * from './useComments'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx index f434ba3df..b6ceb0230 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx +++ b/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'; diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx index c85e44710..9a846b37c 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/stores/useEditorStore.tsx +++ b/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((set) => ({ editor: undefined, - threadStore: undefined, setEditor: (editor) => { set({ editor }); }, - setThreadStore: (threadStore) => { - set({ threadStore }); - }, })); diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx index aaf9ef8c8..851c541eb 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalConfirmationVersion.tsx +++ b/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: () => { diff --git a/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx b/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx index 9aac7160b..0afe2c7e0 100644 --- a/src/frontend/apps/impress/src/features/right-panel/components/RightPanel.tsx +++ b/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'; diff --git a/src/frontend/apps/impress/src/features/right-panel/components/RightPanelCollapseButton.tsx b/src/frontend/apps/impress/src/features/right-panel/components/RightPanelCollapseButton.tsx index ea3ea235c..f7f50b6b4 100644 --- a/src/frontend/apps/impress/src/features/right-panel/components/RightPanelCollapseButton.tsx +++ b/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, );