fix(ui): make icon and color selection work in collection modal

Three root causes, all fixed:

1. Icon buttons were created with setAttribute('onclick', ...) in
   populateIconGrid, but selectIcon is module-scoped (not on window),
   so clicking threw ReferenceError. Switch to addEventListener with
   a closure. Icon search/focus used plain oninput/onfocus attributes
   with the same problem — convert to Alpine @input/@focus.

2. selectColor's highlight selector queried [onclick="selectColor(...)\]

web/src/collections.ts

@@ -363,7 +363,7 @@ function selectColor(color: string): void {
     (btn as HTMLElement).style.outlineOffset = "0";
   });
   const selectedBtn = document.querySelector(
-    `.color-option[onclick="selectColor('${color}')"]`,
+    `.color-option[data-color="${color}"]`,
   ) as HTMLElement;
   if (selectedBtn) {
     selectedBtn.style.outline = "3px solid var(--text-primary)";
@@ -402,6 +402,7 @@ function setupHTMXModalInit(): void {
     const target = evt.detail.target;
     if (target && target.id === "modal-container") {
       populateIconGrid();
+      initColorSelection();
       Alpine.initTree(target);
     }
     if (target && target.id === "book-picker-grid") {
@@ -473,8 +474,9 @@ function populateIconGrid(): void {
     button.type = "button";
     button.className = "icon-btn text-2xl p-1 hover:bg-opacity-80 rounded";
     button.textContent = emoji;
-    button.setAttribute("onclick", `selectIcon('${emoji}')`);
+    button.setAttribute("data-emoji", emoji);
     button.setAttribute("data-keywords", keywords.join(","));
+    button.addEventListener("click", () => selectIcon(emoji));
     iconGrid.appendChild(button);
   });
 }
@@ -496,7 +498,7 @@ function selectIcon(icon: string): void {
   });
 
   const selectedBtn = document.querySelector(
-    `.icon-btn[onclick="selectIcon('${icon}')"]`,
+    `.icon-btn[data-emoji="${icon}"]`,
   ) as HTMLElement;
   if (selectedBtn) {
     selectedBtn.style.outline = "2px solid var(--text-primary)";