fix(web): limit project monograms and retain icon save errors#22830

@@ -83,35 +89,53 @@ export function ProjectIconPickerDialog({
       setEmoji(current?.kind === "emoji" ? current.emoji : "💻");
       setQuery("");
       setCustomEmoji("");
+      setSaveError(null);
     }
     previousOpenRef.current = open;
   }, [current, open, automatic.color, automatic.monogram]);
 
   const icons = filterProjectIconNames(query);
   const selectedColorClassName = projectIconColorClassName(color);
   const monogram = letters.normalize("NFKC").trim().toUpperCase();
-  const validMonogram = isMonogramText(monogram);
-  const save = () => {
-    if (mode === "monogram" && !validMonogram) return;
-    onSelect(
-      mode === "monogram"
-        ? { kind: "monogram", text: monogram, color }
-        : mode === "lucide"
-          ? { kind: "lucide", name: iconName, color }
-          : { kind: "emoji", emoji },
-    );
-    onOpenChange(false);
+  const validMonogram =
+    isMonogramText(monogram) && normalizeProjectMonogramInput(monogram) === monogram;
+  const save = async () => {
+    if (savingRef.current || composingRef.current || (mode === "monogram" && !validMonogram))
+      return;
+    savingRef.current = true;
+    setSaving(true);
+    setSaveError(null);
+    try {
+      await onSelect(
+        mode === "monogram"
+          ? { kind: "monogram", text: monogram, color }
+          : mode === "lucide"
+            ? { kind: "lucide", name: iconName, color }
+            : { kind: "emoji", emoji },
+      );
+      onOpenChange(false);
+    } catch (error) {
+      setSaveError(projectIconSaveErrorMessage(error));
+    }
+    savingRef.current = false;
+    setSaving(false);
   };