Address accessibility, visibility, and performance issues in dynamic tile controls

[Copilot]

Addresses code review feedback from PR #9's dynamic tile creation feature. The original implementation had accessibility gaps, visibility issues on dark backgrounds, and suboptimal rendering performance.

Changes

Accessibility

• Added aria-label attributes to tile control buttons and dropdown for screen reader support

Visual Contrast

• Changed button text color from #2d2d2d to #f1f1f1 for visibility against dark title bar background

User Experience

• Implemented click-outside handler to dismiss dropdown when focus leaves the control area
• Display human-readable tile names in dropdown ("Map View" vs "mapView")

Performance & Code Quality

• Moved Controls component outside render scope and memoized to prevent recreation
• Extracted PendingAdd type for reuse and clarity
• Removed unnecessary useMemo wrapper around static ALL_TILES array
• Added null validation in dropdown onChange handler

// Before: camelCase identifiers, recreated on every render
const Controls: React.FC<{...}> = ({ id, path }) => {
  // Component defined inside parent render
  return <select>
    <option>{t}</option> {/* "mapView" */}
  </select>
}

// After: memoized component with readable labels
const Controls = memo<{...}>(({ id, path, pendingAdd, setPendingAdd }) => {
  return <select aria-label="Select tile to add">
    <option>{TILE_DISPLAY_NAMES[t]}</option> {/* "Map View" */}
  </select>
});

---

💡 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.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /usr/local/bin/node /usr/local/bin/node /home/REDACTED/work/webUI/webUI/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)