fix: hide collaborator list on mobile if empty (#2938)

Co-authored-by: Lipis <lipiridis@gmail.com>

src/components/LayerUI.tsx

@@ -513,17 +513,18 @@ const LayerUI = ({
               "transition-right": zenModeEnabled,
             })}
           >
-            {Array.from(appState.collaborators)
+            {appState.collaborators.size > 0 &&
-              // Collaborator is either not initialized or is actually the current user.
+              Array.from(appState.collaborators)
-              .filter(([_, client]) => Object.keys(client).length !== 0)
+                // Collaborator is either not initialized or is actually the current user.
-              .map(([clientId, client]) => (
+                .filter(([_, client]) => Object.keys(client).length !== 0)
-                <Tooltip
+                .map(([clientId, client]) => (
-                  label={client.username || "Unknown user"}
+                  <Tooltip
-                  key={clientId}
+                    label={client.username || "Unknown user"}
-                >
+                    key={clientId}
-                  {actionManager.renderAction("goToCollaborator", clientId)}
+                  >
-                </Tooltip>
+                    {actionManager.renderAction("goToCollaborator", clientId)}
-              ))}
+                  </Tooltip>
+                ))}
           </UserList>
         </div>
       </FixedSideContainer>

src/components/MobileMenu.tsx

@@ -152,24 +152,26 @@ export const MobileMenu = ({
                 <Stack.Col gap={4}>
                   {renderCanvasActions()}
                   {renderCustomFooter?.(true)}
-                  <fieldset>
+                  {appState.collaborators.size > 0 && (
-                    <legend>{t("labels.collaborators")}</legend>
+                    <fieldset>
-                    <UserList mobile>
+                      <legend>{t("labels.collaborators")}</legend>
-                      {Array.from(appState.collaborators)
+                      <UserList mobile>
-                        // Collaborator is either not initialized or is actually the current user.
+                        {Array.from(appState.collaborators)
-                        .filter(
+                          // Collaborator is either not initialized or is actually the current user.
-                          ([_, client]) => Object.keys(client).length !== 0,
+                          .filter(
-                        )
+                            ([_, client]) => Object.keys(client).length !== 0,
-                        .map(([clientId, client]) => (
+                          )
-                          <React.Fragment key={clientId}>
+                          .map(([clientId, client]) => (
-                            {actionManager.renderAction(
+                            <React.Fragment key={clientId}>
-                              "goToCollaborator",
+                              {actionManager.renderAction(
-                              clientId,
+                                "goToCollaborator",
-                            )}
+                                clientId,
-                          </React.Fragment>
+                              )}
-                        ))}
+                            </React.Fragment>
-                    </UserList>
+                          ))}
-                  </fieldset>
+                      </UserList>
+                    </fieldset>
+                  )}
                 </Stack.Col>
               </div>
             </Section>