Improve Merge States dialog: hover highlight + color boxes + clearer instructions

[Copilot]

The Merge States dialog had no visual feedback and ambiguous instructions, making it difficult to identify states and understand the radio/checkbox roles.

Description

• Dialog → map highlight: Hovering a row animates a red outline on that state's territory (same effect as States Editor). Clears on mouse-leave and dialog close.
• Map → dialog highlight: Hovering a state on the map highlights its row in the open Merge dialog, via highlightEditorLine in general.js. Fixed the clearing selector from .states.hovered → .hovered so it works for any editor, not just rows with the states class.
• State color box: Each row now shows a <fill-box> SVG swatch (supports solid color and hatching) for quick visual identification — consistent with States Editor.
• Clearer instructions: Replaced the vague one-liner with an explanatory paragraph distinguishing the radio button (ruling state) from checkboxes (states to absorb).
• Dialog width: 600px for a comfortable two-column layout.
• Bug fix: Removed stray } from checkbox value template string.

Key fix in general.js:

// Before: only cleared rows with both "states" and "hovered" classes
Array.from(editor.getElementsByClassName("states hovered")).forEach(...)

// After: clears any hovered row regardless of other classes
Array.from(editor.getElementsByClassName("hovered")).forEach(...)

Type of change

• Bug fix
• New feature
• Refactoring / style
• Documentation update / chore
• Other (please describe)

Versioning

• Version is updated
• Changed files hash is updated

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Quick Merge</issue_title>
<issue_description><-- BEFORE CREATING PLEASE CHECK THE TO-DO LIST-->
<-- https://trello.com/b/7x832DG4/fantasy-map-generator ->>
Problem
<-- If someone just wants to mess around on this tool and want to like unite certain countries, its hard to search for them. No highlights, everything is not sorted well and requires reading for 5 minutes to just find the countries, and confusion with the buttons-->

Solution
<-- In the tool section, a new tool called Quick Merge, it will work similiarly to diplomatics tool which You would select a first country and then the other countries to select to unite, with ability to toggle layers. Also a layering system where You can grant highier layer to a nation to make that nation be the first nation ( primary nation ) that will unite every other selected nation, something similiar to resourcepacks priority in terraria and minecraft -->

Alternatives
<-- Make the merge tool a bit more seperated ( expand the window, no need to increase size to the merge ui text and checks ) / Something in a style of AOH II where You can select and drag from the first country to another to add to the merge list. -->

I am sorry if some stuff is messy and not understandable. I apologize.</issue_description>

<agent_instructions>Try to implement the highlight (it's already implemented for e.g. States Editor screen) and add a clear explanation to the dialog window for state merge.</agent_instructions>

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

@Azgaar Good idea, at least we can highlight the state on Merge dialog element hover. And add text explanation on how to merge states.

• Fixes Quick Merge #1333

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for afmg ready!

Name	Link
🔨 Latest commit	2bb2489
🔍 Latest deploy log	https://app.netlify.com/projects/afmg/deploys/69a0904a41f0610008918961
😎 Deploy Preview	https://deploy-preview-1336--afmg.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Azgaar]

@copilot, one more change, please - add small svg box of state color next to each state in the list. It will allow to quickly see what state it is by color. See how it's implemented in States Editor (state may have a color or a hatching).

[Copilot]

@copilot, one more change, please - add small svg box of state color next to each state in the list. It will allow to quickly see what state it is by color. See how it's implemented ...

Done in b635899. Added <fill-box fill="${s.color}" disabled> to each state label in the merge dialog, following the same pattern used in the States Editor. The disabled attribute prevents the click-to-change-color behavior.

[Azgaar]

Upgrade the version.

[Azgaar]

@copilot, update the version.

[Copilot]

@copilot, update the version.

Done in 1dff2be — bumped version from 1.113.0 to 1.113.1.

[Copilot]

Pull request overview

This PR significantly improves the usability of the Merge States dialog by adding visual feedback and clearer instructions. The changes address user confusion when merging countries/states by implementing bidirectional highlighting between the dialog and map, adding color swatches for quick visual identification, and providing explicit instructions that distinguish the radio button (ruling state) from checkboxes (states to absorb).

Changes:

• Added hover-based highlighting: hovering a row in the Merge dialog highlights that state on the map with an animated red outline, and hovering a state on the map highlights its row in the dialog
• Fixed a generic bug in highlightEditorLine that only cleared hovered rows with the "states" class, now clears any hovered row
• Added color boxes (fill-box SVG swatches) to each state row for quick visual identification
• Replaced vague one-liner instructions with a clear explanatory paragraph
• Fixed HTML validation bug (extra } in checkbox value attribute)

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/index.html	Updated version hashes for CSS and general.js to reflect the changes
public/versioning.js	Bumped version from 1.113.0 to 1.113.1
public/modules/ui/general.js	Fixed highlightEditorLine to work with any editor (not just states editor), added merge dialog to map hover highlighting
public/modules/dynamic/editors/states-editor.js	Implemented hover highlighting, color swatches, clearer instructions, and fixed checkbox HTML bug
public/index.css	Added hover styling for merge dialog rows consistent with states editor