🐛 Fix hiding avatar when we have 3 active users

CHANGES.md

@@ -25,6 +25,7 @@
 - Fix error message on components doesn't close automatically [Taiga #12012](https://tree.taiga.io/project/penpot/issue/12012)
 - Fix incorrect default option on tokens import dialog [Github #8051](https://github.com/penpot/penpot/pull/8051)
 - Fix unhandled exception tokens creation dialog [Github #8110](https://github.com/penpot/penpot/issues/8110)
+- Fix displaying a hidden user avatar when there is only one more [Taiga #13058](https://tree.taiga.io/project/penpot/issue/13058)
 
 ## 2.13.0 (Unreleased)
 

frontend/playwright/data/workspace/ws-notifications.js

@@ -5,3 +5,19 @@ export const presenceFixture = {
   "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
   "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
 };
+
+export const joinFixture2 = {
+  "~:type": "~:join-file",
+  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
+  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942e",
+  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
+  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
+};
+
+export const joinFixture3 = {
+  "~:type": "~:join-file",
+  "~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
+  "~:session-id": "~u37730924-d520-80f1-8004-4ae6e5c3942f",
+  "~:profile-id": "~uc7ce0794-0992-8105-8004-38e630f29a9b",
+  "~:topic": "~uc7ce0794-0992-8105-8004-38f280443849",
+};

frontend/playwright/ui/specs/workspace.spec.js

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
 import { WorkspacePage } from "../pages/WorkspacePage";
-import { presenceFixture } from "../../data/workspace/ws-notifications";
+import { presenceFixture, joinFixture2, joinFixture3 } from "../../data/workspace/ws-notifications";
 
 test.beforeEach(async ({ page }) => {
   await WorkspacePage.init(page);
@@ -40,6 +40,28 @@ test("User receives presence notifications updates in the workspace", async ({
   ).toHaveCount(2);
 });
 
+test("BUG 13058 - Presence list shows up to 3 user avatars", async ({
+  page,
+}) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+
+  await workspacePage.goToWorkspace();
+  await workspacePage.sendPresenceMessage(presenceFixture);
+  await workspacePage.sendPresenceMessage(joinFixture2);
+
+  await expect(
+    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
+  ).toHaveCount(3);
+
+  await workspacePage.sendPresenceMessage(joinFixture3);
+  await expect(
+    page.getByTestId("active-users-list").getByAltText("Princesa Leia"),
+  ).toHaveCount(2);
+
+  await expect(page.getByTestId("active-users-list").getByText("+2")).toBeVisible();
+});
+
 test("User draws a rect", async ({ page }) => {
   const workspacePage = new WorkspacePage(page);
   await workspacePage.setupEmptyFile();

frontend/src/app/main/ui/workspace/presence.cljs

@@ -22,7 +22,7 @@
   (let [profile       (assoc profile :color color)
         full-name     (:fullname profile)]
     [:li {:class (stl/css :session-icon)
-          :style {:z-index (dm/str (+ 1 (* -1 index)))
+          :style {:z-index (dm/str (+ 2 (* -1 index)))
                   :background-color color}
           :title full-name}
      [:img {:alt full-name
@@ -37,9 +37,11 @@
 
         sessions     (vals presence)
         num-sessions (count sessions)
+        max-avatar-count 3
+        avatar-count (if (= num-sessions max-avatar-count) max-avatar-count (- max-avatar-count 1))
 
         open*        (mf/use-state false)
-        open?        (and ^boolean (deref open*) (> num-sessions 2))
+        open?        (and ^boolean (deref open*) (> num-sessions max-avatar-count))
         on-open
         (mf/use-fn
          (fn []
@@ -67,10 +69,10 @@
      [:button {:class (stl/css-case :active-users true)
                :on-click on-open}
       [:ul {:class (stl/css :active-users-list) :data-testid "active-users-list"}
-       (when (> num-sessions 2)
-         [:span {:class (stl/css :users-num)} (dm/str "+" (- num-sessions 2))])
+       (when (> num-sessions max-avatar-count)
+         [:li {:class (stl/css :users-num)} (dm/str "+" (+ 1 (- num-sessions max-avatar-count)))])
 
-       (for [[index session] (d/enumerate (take 2 sessions))]
+       (for [[index session] (d/enumerate (take avatar-count sessions))]
          [:& session-widget
           {:color (:color session)
            :index index

frontend/src/app/main/ui/workspace/presence.scss

@@ -16,6 +16,7 @@
   margin: 0;
   padding: 0 deprecated.$s-4;
   border-radius: deprecated.$br-8;
+
   .active-users-list {
     display: flex;
     flex-direction: row-reverse;
@@ -26,9 +27,10 @@
       @extend .user-icon;
       background-color: var(--user-count-background-color);
       color: var(--user-count-foreground-color);
-      z-index: deprecated.$z-index-2;
+      z-index: deprecated.$z-index-3;
       border: deprecated.$s-2 solid var(--user-count-foreground-color);
     }
+
     .session-icon {
       @extend .user-icon;
     }
@@ -43,11 +45,13 @@
   margin: calc(-1 * deprecated.$s-2) calc(-1 * deprecated.$s-4) 0 0;
   background-color: var(--menu-background-color);
   z-index: deprecated.$z-index-4;
+
   .active-users-list {
     gap: deprecated.$s-4;
+
     .users-num,
     .session-icon {
       margin-left: 0;
     }
   }
-}
+}