fix(ui): show busy avatar chooser as disabled (#128059)

Amp-Thread-ID: https://ampcode.com/threads/T-01a021f4-b547-7788-a916-d4a94cbd3e3b

Co-authored-by: Amp <amp@ampcode.com>

ui/src/e2e/profile-page.e2e.test.ts

@@ -639,6 +639,12 @@ suite.define(() => {
         await expect
           .poll(async () => (await gateway.getRequests("users.setAvatar")).length)
           .toBe(requestCountBefore + 1);
+        const chooser = page.locator(".identity-avatar-control > label");
+        await screenshot(page, "11-avatar-action-disabled.png");
+        await expect(chooser).toHaveAttribute("aria-disabled", "true");
+        await expect
+          .poll(() => chooser.evaluate((element) => getComputedStyle(element).opacity))
+          .toBe("0.5");
         await gateway.emitGatewayEvent("presence", {
           presence: [
             {

ui/src/pages/profile/identity-section.test.ts

@@ -132,6 +132,11 @@ describe("renderIdentitySection", () => {
     expect(input?.accept).toBe("image/png,image/jpeg,image/webp");
     expect(input?.value).toBe("");
     expect(onAvatarSelect).toHaveBeenCalledWith(file);
+
+    render(renderIdentitySection(createProps({ busy: "display-name" })), container);
+    const chooser = container.querySelector<HTMLElement>(".identity-avatar-control .btn");
+    expect(chooser?.getAttribute("aria-disabled")).toBe("true");
+    expect(container.querySelector<HTMLInputElement>('input[type="file"]')?.disabled).toBe(true);
   });
 
   it("shows verified GitHub identity and explicit co-author credit", () => {

ui/src/pages/profile/identity-section.ts

@@ -57,7 +57,7 @@ export function renderIdentitySection(props: IdentitySectionProps) {
                 .user=${avatarViewer(props.profile, props.avatarUrl)}
                 variant="profile"
               ></openclaw-viewer-avatar>
-              <label class="btn btn--sm">
+              <label class="btn btn--sm" aria-disabled=${props.busy !== null}>
                 ${props.busy === "avatar"
                   ? t("profilePage.identity.processingAvatar")
                   : t("profilePage.identity.chooseAvatar")}

ui/src/styles/components.css

@@ -1107,7 +1107,7 @@ openclaw-session-progress-hovercard-provider {
   border-color: transparent;
 }
 
-.btn:disabled {
+.btn:is(:disabled, [aria-disabled="true"]) {
   opacity: 0.5;
   cursor: not-allowed;
 }