feat(review): make review mode independent of tool selection

- Tool button clicks no longer exit review mode
- Review button moved outside tool group with divider separator
- Tool active state no longer dimmed during review mode
- Updated hint text for review mode
This commit is contained in:
Hiren Kangad
2026-03-12 22:09:12 +05:30
parent d3f7c45dda
commit 2d1c06cec9
+8 -7
View File
@@ -127,7 +127,7 @@ const toolButtons: { tool: ToolType; label: string; shortcut: string; numKey: st
{ tool: ToolType.TEXT, label: 'Text', shortcut: 'T', numKey: '4', Icon: IconText, hint: 'Click on the canvas to place text' },
];
const REVIEW_HINT = 'Click an image to leave a comment. Press . to toggle.';
const REVIEW_HINT = 'Click an object to place a comment pin. Press . to toggle.';
export default function Toolbar({
activeTool,
@@ -180,11 +180,11 @@ export default function Toolbar({
{/* Tool buttons */}
<div style={{ display: 'flex', gap: '1px', background: '#222', borderRadius: '8px', padding: '2px' }}>
{toolButtons.map(({ tool, label, shortcut, numKey, Icon }) => {
const active = activeTool === tool && !reviewMode;
const active = activeTool === tool;
return (
<button
key={tool}
onClick={() => { onToolChange(tool); if (reviewMode && onToggleReview) onToggleReview(); }}
onClick={() => onToolChange(tool)}
title={`${label} (${shortcut} or ${numKey})`}
style={{
display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -212,8 +212,10 @@ export default function Toolbar({
</button>
);
})}
{/* Review mode — in tool group */}
{onToggleReview && (
</div>
{/* Review mode — independent toggle, separated from tools */}
{onToggleReview && (<>
<Divider />
<button
onClick={onToggleReview}
title="Review (.)"
@@ -241,8 +243,7 @@ export default function Toolbar({
.
</span>
</button>
)}
</div>
</>)}
<Divider />