From 00209ef9c3948e9e34b25672df692d323eee3018 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Fri, 5 Feb 2021 15:45:44 +0100
Subject: [PATCH] fix: hide collaborator list on mobile if empty (#2938)

Co-authored-by: Lipis <lipiridis@gmail.com>
---
 src/components/LayerUI.tsx    | 23 +++++++++++----------
 src/components/MobileMenu.tsx | 38 ++++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index ad30daf59c..2bb8c984c2 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -513,17 +513,18 @@ const LayerUI = ({
               "transition-right": zenModeEnabled,
             })}
           >
-            {Array.from(appState.collaborators)
-              // Collaborator is either not initialized or is actually the current user.
-              .filter(([_, client]) => Object.keys(client).length !== 0)
-              .map(([clientId, client]) => (
-                <Tooltip
-                  label={client.username || "Unknown user"}
-                  key={clientId}
-                >
-                  {actionManager.renderAction("goToCollaborator", clientId)}
-                </Tooltip>
-              ))}
+            {appState.collaborators.size > 0 &&
+              Array.from(appState.collaborators)
+                // Collaborator is either not initialized or is actually the current user.
+                .filter(([_, client]) => Object.keys(client).length !== 0)
+                .map(([clientId, client]) => (
+                  <Tooltip
+                    label={client.username || "Unknown user"}
+                    key={clientId}
+                  >
+                    {actionManager.renderAction("goToCollaborator", clientId)}
+                  </Tooltip>
+                ))}
           </UserList>
         </div>
       </FixedSideContainer>
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index fafdaa4cec..a23c4c6fba 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -152,24 +152,26 @@ export const MobileMenu = ({
                 <Stack.Col gap={4}>
                   {renderCanvasActions()}
                   {renderCustomFooter?.(true)}
-                  <fieldset>
-                    <legend>{t("labels.collaborators")}</legend>
-                    <UserList mobile>
-                      {Array.from(appState.collaborators)
-                        // Collaborator is either not initialized or is actually the current user.
-                        .filter(
-                          ([_, client]) => Object.keys(client).length !== 0,
-                        )
-                        .map(([clientId, client]) => (
-                          <React.Fragment key={clientId}>
-                            {actionManager.renderAction(
-                              "goToCollaborator",
-                              clientId,
-                            )}
-                          </React.Fragment>
-                        ))}
-                    </UserList>
-                  </fieldset>
+                  {appState.collaborators.size > 0 && (
+                    <fieldset>
+                      <legend>{t("labels.collaborators")}</legend>
+                      <UserList mobile>
+                        {Array.from(appState.collaborators)
+                          // Collaborator is either not initialized or is actually the current user.
+                          .filter(
+                            ([_, client]) => Object.keys(client).length !== 0,
+                          )
+                          .map(([clientId, client]) => (
+                            <React.Fragment key={clientId}>
+                              {actionManager.renderAction(
+                                "goToCollaborator",
+                                clientId,
+                              )}
+                            </React.Fragment>
+                          ))}
+                      </UserList>
+                    </fieldset>
+                  )}
                 </Stack.Col>
               </div>
             </Section>