Improve Custom Key Editor UX and Functionality

[areumjo]

The custom key editor (KeyEditorModal.tsx) is a powerful feature but has several usability gaps that prevent a smooth design experience, especially for multi-cell and line-based keys. This issue tracks four key improvements needed to finalize its functionality.

---

1. Add Padding to Drawing Canvas to Prevent Stroke Clipping

• Problem: When drawing lines in the custom key editor, strokes that fall on the very edge of the canvas can be visually clipped, showing only half their width.
• File: components/KeyEditorModal.tsx
• Suggested Fix: Add padding around the SVG drawing area itself, either by adjusting the viewBox or wrapping the svg element in another padded container. This will ensure that the full stroke width is always visible.

2. Remove Internal Grid Borders for Multi-Cell Keys

• Problem: When creating a multi-cell (MxN) key in "Cell Mode", the preview incorrectly shows the borders for each individual cell. The preview should display as a single, unified area with the defined background color, not a grid.
• File: components/KeyEditorModal.tsx
• Suggested Fix: Conditionally render the borders on the preview cells. When editedWidth > 1 or editedHeight > 1, the individual borders between cells should be hidden to give the appearance of a single, continuous component.

3. Add Guide Lines for Line Drawing Mode on Multi-Cell Keys

• Problem: When using "Line Mode" to draw a custom symbol on a multi-cell key, the canvas is a blank slate. There are no visual guides to indicate the boundaries of the individual cells, making it difficult to align the drawing precisely.
• File: components/KeyEditorModal.tsx
• Suggested Fix: Render faint guide lines within the SVG canvas that correspond to the grid cell divisions. These lines should only be visible in Line Mode when editedWidth > 1 or editedHeight > 1.

4. Implement Undo/Redo for Line Drawing

• Problem: There is no way to undo or redo line drawing actions within the custom key editor. A mistake requires clearing all lines and starting over. The UI contains commented-out code for this feature.
• File: components/KeyEditorModal.tsx
• Suggested Fix: Implement a local state management system (e.g., a simple history array with an index pointer using useState) within the KeyEditorModal component to track changes to the editedLines state. This will enable Ctrl+Z / Cmd+Z functionality and allow the Undo/Redo buttons to be enabled.