Toggle edit annotation button

[shinyichen]

Screen.Recording.2026-04-08.at.10.06.29.AM.mov

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 62.5%. Comparing base (d4b221b) to head (14ab6c7).
⚠️ Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff            @@
##           master    #838     +/-   ##
========================================
+ Coverage    62.5%   62.5%   +0.1%     
========================================
  Files         317     316      -1     
  Lines       36576   36478     -98     
  Branches     1673    1672      -1     
========================================
- Hits        22827   22789     -38     
+ Misses      13709   13649     -60     
  Partials       40      40             

see 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[thostetler]

In the ticket I was thinking that we should have some visual indication that clicking the button would toggle a menu. Would you mind seeing if you like this type of approach:

<Tooltip label={isOpen ? 'Hide annotation' : 'Show annotation'}>
  <IconButton
    aria-label={isOpen ? 'Hide annotation' : 'Show annotation'}
    aria-expanded={isOpen}
    icon={
      <HStack spacing="1px" align="center">
        <PencilSquareIcon width="18px" height="18px" />
        <ChevronDownIcon
          boxSize="14px"
          transform={isOpen ? 'rotate(180deg)' : 'rotate(0deg)'}
          transition="transform 0.2s ease"
        />
      </HStack>
    }
    variant="link"
    size="xs"
    onClick={onToggle}
  />
</Tooltip>

Composing the icon with a chevron that rotates?
I'm not sure how this would look exactly, haven't tested it, but you get the idea.

[shinyichen]

@thostetler Updated

[thostetler]

Nice 👍