fix(client): move the status-picker dot onto the avatar corner

The corner dot on the user bar avatar was a static hardcoded-green div —
never reflected real status and did nothing on click. Removed it and
relocated the actual StatusPicker trigger dot (real color, opens the
status dropdown) to that same corner instead of its own row. The
"Online"/"Idle"/... text label under the username is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Client/tauri-client/src/components/UserBar.ts

@@ -120,19 +120,15 @@ export function createUserBar(options?: UserBarOptions): MountableComponent {
     });
     avatarTextEl = createElement("span", {});
     avatarEl.appendChild(avatarTextEl);
-    const statusDot = createElement("div", {
-      class: "status-dot",
-      style:
-        "background: var(--green); width: 10px; height: 10px; border-radius: 50%; position: absolute; bottom: 0; right: 0;",
-    });
-    avatarEl.appendChild(statusDot);
 
     const info = createElement("div", { class: "ub-info" });
     nameEl = createElement("span", { class: "ub-name", "data-testid": "user-bar-name" });
     statusEl = createElement("span", { class: "ub-status" });
     appendChildren(info, nameEl, statusEl);
 
-    // Status picker — anchored below username, opens upward
+    // Status picker — the dot itself lives in the avatar's corner (same spot
+    // the old plain status indicator occupied) so it doubles as the status
+    // display and its click target; the dropdown still opens upward from there.
     const statusPickerWrap = createElement("div", {
       class: "ub-status-picker-wrap",
       "data-testid": "status-picker-wrap",
@@ -203,7 +199,7 @@ export function createUserBar(options?: UserBarOptions): MountableComponent {
       () => updatePickerDisabled(),
     );
 
-    info.appendChild(statusPickerWrap);
+    avatarEl.appendChild(statusPickerWrap);
 
     const buttons = createElement("div", { class: "ub-controls" });
 

Client/tauri-client/src/styles/app.css

@@ -657,14 +657,14 @@
   color: white;
   cursor: pointer;
 }
-.user-bar .status-dot {
+/* The status picker's own trigger dot now lives here instead of a separate
+   static dot — same corner, but it's the real thing: colored per status and
+   clickable to open the picker. Sizing/border override lives with the rest
+   of the status-picker rules below. */
+.user-bar .ub-status-picker-wrap {
   position: absolute;
   bottom: -1px;
   right: -1px;
-  width: 12px;
-  height: 12px;
-  border-radius: var(--radius-circle);
-  border: 3px solid rgba(17, 18, 20, 0.6);
 }
 .user-bar .ub-info {
   flex: 1;
@@ -750,6 +750,13 @@
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+/* In the user bar the dot sits on the avatar corner, not inline next to
+   text — bigger, with a ring so it reads against any avatar picture. */
+.user-bar .status-picker-dot {
+  width: 12px;
+  height: 12px;
+  border: 3px solid rgba(17, 18, 20, 0.6);
+}
 .status-picker-option {
   display: flex;
   align-items: center;

Client/tauri-client/tests/e2e/user-bar.spec.ts

@@ -36,6 +36,13 @@ test.describe("User Bar", () => {
     await expect(status).toHaveText("Online");
   });
 
+  test("status picker dot sits on the avatar", async ({ page }) => {
+    const dot = page.locator(
+      "[data-testid='user-bar'] .ub-avatar [data-testid='status-picker-wrap'] .status-picker-dot",
+    );
+    await expect(dot).toBeVisible();
+  });
+
   test("user bar has settings button with correct label", async ({ page }) => {
     const controls = page.locator("[data-testid='user-bar'] .ub-controls");
     await expect(controls).toBeVisible();