From 26b46ccd95181f2ff83ecaab6d2d0ceb3da1a0cf Mon Sep 17 00:00:00 2001
From: J3vb <192430104+J3vb@users.noreply.github.com>
Date: Sun, 9 Aug 2026 08:50:59 +0200
Subject: [PATCH] fix(client): move the status-picker dot onto the avatar
 corner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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  | 12 ++++--------
 Client/tauri-client/src/styles/app.css         | 17 ++++++++++++-----
 Client/tauri-client/tests/e2e/user-bar.spec.ts |  7 +++++++
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/Client/tauri-client/src/components/UserBar.ts b/Client/tauri-client/src/components/UserBar.ts
index 10142789..0034026f 100644
--- a/Client/tauri-client/src/components/UserBar.ts
+++ b/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" });
 
diff --git a/Client/tauri-client/src/styles/app.css b/Client/tauri-client/src/styles/app.css
index 63419357..0a024017 100644
--- a/Client/tauri-client/src/styles/app.css
+++ b/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;
diff --git a/Client/tauri-client/tests/e2e/user-bar.spec.ts b/Client/tauri-client/tests/e2e/user-bar.spec.ts
index d6d4baa9..e9731dbb 100644
--- a/Client/tauri-client/tests/e2e/user-bar.spec.ts
+++ b/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();