Walkthrough

The AccentColorPicker.vue component has been modified to enhance how it handles the prehydration of selected accent colours. When the server-selected colour ID is found, the code now both sets input.checked to true and explicitly adds the checked attribute using setAttribute(). Additionally, the implementation now explicitly deselects the default "clear" option by unchecking it and removing its checked attribute when a non-default accent colour is loaded. These changes ensure consistent handling of input state between property values and DOM attributes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

app/components/Settings/AccentColorPicker.vue (1)

10-10: Consider using CSS.escape() for the selector value.

If id ever contains CSS selector metacharacters (e.g., ", ], \), the query selector would break or behave unexpectedly. While the risk is low since id comes from controlled localStorage data, escaping is a more robust pattern.

♻️ Suggested improvement

-    const input = el.querySelector<HTMLInputElement>(`input[value="${id}"]`)
+    const input = el.querySelector<HTMLInputElement>(`input[value="${CSS.escape(id)}"]`)