Replace text buttons with icons and add tooltips

[Copilot]

The T, c, and i buttons lacked visual clarity and discoverability. This PR replaces them with icons and adds title attributes for tooltips.

Changes

• New icon components following existing SVG pattern with var(--color-icon):

  • IconVisibility - eye icon for toggle visibility (T/t → 👁️)
  • IconClone - overlapping squares for duplication (c → ▢▢)
  • IconInvert - circle with X for matrix inversion (i → ⊗)

• Added tooltips to all control buttons:

  • Dynamic tooltip for visibility: "Show matrix" / "Hide matrix"
  • Static tooltips for: Clone, Invert, Move left/right, Delete

<button
  className={styles.button}
  onClick={toggleMatrix}
  title={visible ? 'Hide matrix' : 'Show matrix'}
>
  <IconVisibility />
</button>

Screenshots

Before:

After:

Tooltip demo:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Replace T c i with icons and add titles</issue_title>
<issue_description>Replace the T, c, and i buttons with icons that better depict they're functionality. Also add title attributes so that we get tooltips that make the functionality extra clear.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Replace T c i with icons and add titles #5

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.