feat: Add export dropdown for diagram downloads

[harley]

Summary

• replace the SVG and PNG download buttons with a single Export dropdown in the content script
• update styling helpers so the dropdown respects theme changes and disables actions when diagrams are unavailable
• refresh UI and testing docs to note the new Export workflow

Testing

• pnpm test

---

https://chatgpt.com/codex/tasks/task_b_68de2ed7f85c832ba43b83d5c60a6735

[gemini-code-assist]

Summary of Changes

Hello @harley, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the diagram download functionality by replacing individual SVG and PNG download buttons with a unified 'Export' dropdown menu. This change aims to streamline the user interface, improve usability, and ensure consistent styling and behavior across different themes and diagram states. It also includes necessary updates to documentation to reflect the new workflow.

Highlights

• Unified Export Functionality: Replaced separate SVG and PNG download buttons with a single 'Export' dropdown menu in the content script, streamlining the user interface.
• Dynamic Styling and State Management: Updated styling helpers to ensure the new dropdown respects theme changes and disables export actions when diagrams are not available, improving user experience consistency.
• Documentation Updates: Refreshed UI and testing documentation to reflect the new 'Export' workflow, providing clear guidance for users and developers.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully replaces the separate SVG and PNG download buttons with a more compact 'Export' dropdown menu. The implementation correctly handles UI state, theme changes, and user interactions. I've identified a few areas for improvement, primarily related to accessibility and code simplification. I've provided specific suggestions for each of these points. Overall, this is a great enhancement to the UI.

[gemini-code-assist]

The dropdown menu is not fully keyboard accessible. It should allow navigation between items using the ArrowUp and ArrowDown keys. The current implementation only handles closing on 'Tab', which is insufficient for keyboard navigation within the menu.

  menu.addEventListener('keydown', (event) => {
    if (event.key === 'Tab') {
      closeMenu()
      return
    }

    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
      event.preventDefault()
      const menuItems = [svgItem, pngItem]
      const currentFocus = doc.activeElement
      const currentIndex = menuItems.findIndex((item) => item === currentFocus)

      let nextIndex: number
      if (event.key === 'ArrowDown') {
        nextIndex = currentIndex >= 0 ? (currentIndex + 1) % menuItems.length : 0
      } else { // ArrowUp
        nextIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1
      }

      menuItems[nextIndex]?.focus()
    }
  })

[gemini-code-assist]

For better accessibility, this button, which acts as a menu item, should have the role="menuitem" attribute. This helps screen readers understand its purpose within the parent menu, which correctly has role="menu".

Suggested change

	button.type = 'button'
	button.type = 'button'
	button.setAttribute('role', 'menuitem')

[gemini-code-assist]

These two lines are redundant. The call to updateDownloadButtons(entry) on the next line already handles setting the button's disabled state and updating its appearance based on the diagram's availability. Removing these lines will make the code cleaner and avoid duplication of logic.