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' }, { 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({ export default function Toolbar({
activeTool, activeTool,
@@ -180,11 +180,11 @@ export default function Toolbar({
{/* Tool buttons */} {/* Tool buttons */}
<div style={{ display: 'flex', gap: '1px', background: '#222', borderRadius: '8px', padding: '2px' }}> <div style={{ display: 'flex', gap: '1px', background: '#222', borderRadius: '8px', padding: '2px' }}>
{toolButtons.map(({ tool, label, shortcut, numKey, Icon }) => { {toolButtons.map(({ tool, label, shortcut, numKey, Icon }) => {
const active = activeTool === tool && !reviewMode; const active = activeTool === tool;
return ( return (
<button <button
key={tool} key={tool}
onClick={() => { onToolChange(tool); if (reviewMode && onToggleReview) onToggleReview(); }} onClick={() => onToolChange(tool)}
title={`${label} (${shortcut} or ${numKey})`} title={`${label} (${shortcut} or ${numKey})`}
style={{ style={{
display: 'flex', alignItems: 'center', justifyContent: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center',
@@ -212,8 +212,10 @@ export default function Toolbar({
</button> </button>
); );
})} })}
{/* Review mode — in tool group */} </div>
{onToggleReview && ( {/* Review mode — independent toggle, separated from tools */}
{onToggleReview && (<>
<Divider />
<button <button
onClick={onToggleReview} onClick={onToggleReview}
title="Review (.)" title="Review (.)"
@@ -241,8 +243,7 @@ export default function Toolbar({
. .
</span> </span>
</button> </button>
)} </>)}
</div>
<Divider /> <Divider />