refactor(review): remove panel draft composer, move suppression to Editor
This commit is contained in:
@@ -2,9 +2,7 @@ import React, { useState, useCallback, useEffect, useSyncExternalStore } from 'r
|
|||||||
import { AnnotationStore } from '../../stores/annotationStore';
|
import { AnnotationStore } from '../../stores/annotationStore';
|
||||||
import ThreadList, { FilterType } from './ThreadList';
|
import ThreadList, { FilterType } from './ThreadList';
|
||||||
import ThreadDetail from './ThreadDetail';
|
import ThreadDetail from './ThreadDetail';
|
||||||
import CommentInput from './CommentInput';
|
|
||||||
import { PANEL_BG, BORDER, TEXT_MUTED, TEXT_PRIMARY, STATUS_OPEN } from './feedbackStyles';
|
import { PANEL_BG, BORDER, TEXT_MUTED, TEXT_PRIMARY, STATUS_OPEN } from './feedbackStyles';
|
||||||
import type { DraftPin } from '../../pages/Editor';
|
|
||||||
|
|
||||||
interface FeedbackPanelProps {
|
interface FeedbackPanelProps {
|
||||||
annotationStore: AnnotationStore;
|
annotationStore: AnnotationStore;
|
||||||
@@ -19,10 +17,6 @@ interface FeedbackPanelProps {
|
|||||||
expandRequest?: { threadId: string | null; seq: number } | null;
|
expandRequest?: { threadId: string | null; seq: number } | null;
|
||||||
/** Focused thread ID for highlighting */
|
/** Focused thread ID for highlighting */
|
||||||
focusedThreadId?: string | null;
|
focusedThreadId?: string | null;
|
||||||
/** Draft pin for point-comment creation */
|
|
||||||
draftPin?: DraftPin | null;
|
|
||||||
/** Callback to create a point-pinned thread */
|
|
||||||
onCreatePointThread?: (draftPin: DraftPin, content: string) => Promise<void>;
|
|
||||||
/** Callback when expanded thread detail changes */
|
/** Callback when expanded thread detail changes */
|
||||||
onThreadDetailChange?: (threadId: string | null) => void;
|
onThreadDetailChange?: (threadId: string | null) => void;
|
||||||
}
|
}
|
||||||
@@ -38,8 +32,6 @@ export default function FeedbackPanel({
|
|||||||
onError,
|
onError,
|
||||||
expandRequest,
|
expandRequest,
|
||||||
focusedThreadId,
|
focusedThreadId,
|
||||||
draftPin,
|
|
||||||
onCreatePointThread,
|
|
||||||
onThreadDetailChange,
|
onThreadDetailChange,
|
||||||
}: FeedbackPanelProps) {
|
}: FeedbackPanelProps) {
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
@@ -289,30 +281,6 @@ export default function FeedbackPanel({
|
|||||||
selectedObjectId?.slice(0, 8) ||
|
selectedObjectId?.slice(0, 8) ||
|
||||||
'';
|
'';
|
||||||
|
|
||||||
// Draft pin comment input (shown above thread list when draft is active)
|
|
||||||
const draftCommentSection = draftPin ? (
|
|
||||||
<div style={{ padding: '12px 16px', borderBottom: `1px solid ${BORDER}`, background: 'rgba(249, 115, 22, 0.03)' }}>
|
|
||||||
<div style={{ color: TEXT_MUTED, fontSize: '10px', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.5px' }}>
|
|
||||||
Comment on point
|
|
||||||
</div>
|
|
||||||
<div style={{ color: TEXT_PRIMARY, fontSize: '12px', marginBottom: '10px', fontWeight: 500 }}>
|
|
||||||
{canvasObjects.get(draftPin.objectId)?.name || canvasObjects.get(draftPin.objectId)?.type || 'Object'}
|
|
||||||
</div>
|
|
||||||
<CommentInput
|
|
||||||
value={newCommentText}
|
|
||||||
onChange={setNewCommentText}
|
|
||||||
onSubmit={async () => {
|
|
||||||
if (!newCommentText.trim() || !onCreatePointThread || !draftPin) return;
|
|
||||||
await onCreatePointThread(draftPin, newCommentText.trim());
|
|
||||||
setNewCommentText('');
|
|
||||||
}}
|
|
||||||
placeholder="Add a point comment..."
|
|
||||||
submitLabel="Comment"
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThreadList
|
<ThreadList
|
||||||
threads={threads}
|
threads={threads}
|
||||||
@@ -323,12 +291,11 @@ export default function FeedbackPanel({
|
|||||||
onFilterChange={setFilter}
|
onFilterChange={setFilter}
|
||||||
onSelectThread={updateExpandedThread}
|
onSelectThread={updateExpandedThread}
|
||||||
onCollapse={() => setCollapsed(true)}
|
onCollapse={() => setCollapsed(true)}
|
||||||
selectedObjectId={draftPin ? null : selectedObjectId}
|
selectedObjectId={selectedObjectId}
|
||||||
selectedObjectLabel={selectedLabel}
|
selectedObjectLabel={selectedLabel}
|
||||||
newCommentText={newCommentText}
|
newCommentText={newCommentText}
|
||||||
onNewCommentChange={setNewCommentText}
|
onNewCommentChange={setNewCommentText}
|
||||||
onCreateThread={handleCreateThread}
|
onCreateThread={handleCreateThread}
|
||||||
headerSlot={draftCommentSection}
|
|
||||||
focusedThreadId={focusedThreadId}
|
focusedThreadId={focusedThreadId}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -29,8 +29,6 @@ interface ThreadListProps {
|
|||||||
newCommentText: string;
|
newCommentText: string;
|
||||||
onNewCommentChange: (text: string) => void;
|
onNewCommentChange: (text: string) => void;
|
||||||
onCreateThread: () => void;
|
onCreateThread: () => void;
|
||||||
/** Optional slot rendered above the thread list (e.g., draft pin input) */
|
|
||||||
headerSlot?: React.ReactNode;
|
|
||||||
/** Currently focused thread ID for highlighting */
|
/** Currently focused thread ID for highlighting */
|
||||||
focusedThreadId?: string | null;
|
focusedThreadId?: string | null;
|
||||||
}
|
}
|
||||||
@@ -49,7 +47,6 @@ export default function ThreadList({
|
|||||||
newCommentText,
|
newCommentText,
|
||||||
onNewCommentChange,
|
onNewCommentChange,
|
||||||
onCreateThread,
|
onCreateThread,
|
||||||
headerSlot,
|
|
||||||
focusedThreadId,
|
focusedThreadId,
|
||||||
}: ThreadListProps) {
|
}: ThreadListProps) {
|
||||||
const [showOrphans, setShowOrphans] = React.useState(false);
|
const [showOrphans, setShowOrphans] = React.useState(false);
|
||||||
@@ -160,9 +157,6 @@ export default function ThreadList({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Draft pin comment input (injected from FeedbackPanel) */}
|
|
||||||
{headerSlot}
|
|
||||||
|
|
||||||
{/* Thread list */}
|
{/* Thread list */}
|
||||||
<div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'thin', scrollbarColor: '#2a2a2e transparent' }}>
|
<div style={{ flex: 1, overflowY: 'auto', scrollbarWidth: 'thin', scrollbarColor: '#2a2a2e transparent' }}>
|
||||||
{threads.length === 0 && (
|
{threads.length === 0 && (
|
||||||
|
|||||||
@@ -1039,7 +1039,7 @@ export default function Editor({ isPublicView }: EditorProps) {
|
|||||||
{reviewMode && annotationStore && user && resolvedBoardId && (
|
{reviewMode && annotationStore && user && resolvedBoardId && (
|
||||||
<FeedbackPanel
|
<FeedbackPanel
|
||||||
annotationStore={annotationStore}
|
annotationStore={annotationStore}
|
||||||
selectedObjectId={selectedLayerIds.length === 1 ? selectedLayerIds[0] : null}
|
selectedObjectId={draftPin ? null : (selectedLayerIds.length === 1 ? selectedLayerIds[0] : null)}
|
||||||
userId={user.id}
|
userId={user.id}
|
||||||
boardId={resolvedBoardId}
|
boardId={resolvedBoardId}
|
||||||
token={localStorage.getItem('refboard_token') || ''}
|
token={localStorage.getItem('refboard_token') || ''}
|
||||||
@@ -1047,8 +1047,6 @@ export default function Editor({ isPublicView }: EditorProps) {
|
|||||||
onError={(msg) => showToast(msg)}
|
onError={(msg) => showToast(msg)}
|
||||||
expandRequest={expandRequest}
|
expandRequest={expandRequest}
|
||||||
focusedThreadId={focusedThreadId}
|
focusedThreadId={focusedThreadId}
|
||||||
draftPin={draftPin}
|
|
||||||
onCreatePointThread={handleCreatePointThread}
|
|
||||||
onThreadDetailChange={setOpenThreadDetailId}
|
onThreadDetailChange={setOpenThreadDetailId}
|
||||||
onJumpToObject={(objectId, thread) => {
|
onJumpToObject={(objectId, thread) => {
|
||||||
const scene = canvasRef.current?.getScene();
|
const scene = canvasRef.current?.getScene();
|
||||||
|
|||||||
Reference in New Issue
Block a user