4bfb6b46ad
Adds a text-selection comment flow that opens New Task with source context. - Add a reusable selection comment hook and popover for editor/document text selections. - Thread selected-file and line-range context into the New Task modal. - Enable comment-on-selection entry points in file editor, browser, documents, and memory surfaces. - Cover the selection flow with focused component and hook tests, plus docs and copy updates. Files changed: docs/dashboard-guide.md | 6 +- packages/dashboard/app/App.tsx | 7 +- packages/dashboard/app/components/AppModals.tsx | 2 + .../dashboard/app/components/DocumentsView.tsx | 25 ++- .../dashboard/app/components/FileBrowserModal.tsx | 3 + packages/dashboard/app/components/FileEditor.tsx | 35 +++- packages/dashboard/app/components/MemoryView.tsx | 5 +- packages/dashboard/app/components/NewTaskModal.tsx | 15 +- .../app/components/SelectionCommentPopover.css | 73 +++++++++ .../app/components/SelectionCommentPopover.tsx | 181 +++++++++++++++++++++ .../components/__tests__/DocumentsView.test.tsx | 59 +++++++ .../components/__tests__/FileBrowserModal.test.tsx | 79 +++++++++ .../app/components/__tests__/FileEditor.test.tsx | 60 +++++++ .../app/components/__tests__/MemoryView.test.tsx | 48 +++++- .../app/components/__tests__/NewTaskModal.test.tsx | 17 ++ .../__tests__/SelectionCommentPopover.test.tsx | 75 +++++++++ .../app/hooks/__tests__/useModalManager.test.ts | 29 ++++ .../hooks/__tests__/useSelectionComment.test.ts | 140 ++++++++++++++++ packages/dashboard/app/hooks/useModalManager.ts | 19 ++- .../dashboard/app/hooks/useSelectionComment.ts | 95 +++++++++++ packages/i18n/locales/en/app.json | 11 ++ 21 files changed, 973 insertions(+), 11 deletions(-) Fusion-Task-Id: FN-6528 Fusion-Task-Lineage: ef79e450-e69f-497b-97cd-f82d3c832fdf
74 lines
1.7 KiB
CSS
74 lines
1.7 KiB
CSS
.selection-comment-trigger,
|
|
.selection-comment-panel {
|
|
position: fixed;
|
|
z-index: 10001;
|
|
left: var(--selection-comment-left);
|
|
top: var(--selection-comment-top);
|
|
}
|
|
|
|
.selection-comment-trigger {
|
|
transform: translate(-50%, calc(-1 * var(--space-xl)));
|
|
box-shadow: var(--shadow-md);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.selection-comment-panel {
|
|
width: min(var(--selection-comment-panel-width, calc(var(--space-2xl) * 12)), calc(100vw - (var(--space-lg) * 2)));
|
|
transform: translate(-50%, var(--space-xs));
|
|
padding: var(--space-md);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-sm);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.selection-comment-title {
|
|
margin: 0;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.selection-comment-snippet {
|
|
margin: 0;
|
|
max-height: calc(var(--space-2xl) * 3);
|
|
overflow: auto;
|
|
color: var(--text-muted);
|
|
background: var(--surface-subtle);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: var(--space-sm);
|
|
font-family: var(--font-mono);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.selection-comment-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.selection-comment-textarea {
|
|
min-height: calc(var(--space-2xl) * 2.5);
|
|
resize: vertical;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.selection-comment-trigger,
|
|
.selection-comment-panel {
|
|
left: max(var(--space-lg), min(var(--selection-comment-left), calc(100vw - var(--space-lg))));
|
|
}
|
|
|
|
.selection-comment-trigger {
|
|
transform: translate(-50%, calc(-1 * var(--space-2xl)));
|
|
}
|
|
|
|
.selection-comment-actions {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
.selection-comment-actions .btn {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|