Merge pull request #9602 from hicommonwealth/israel.9598.arrows-overl…

…ap-community-name truncated long community names in sidebar header and added tooltip
hicommonwealth · Oct 21, 2024 · 1927f79 · 1927f79
2 parents 58c5b40 + fc7c574
commit 1927f79
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/...nwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx b/...nwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
@@ -5,9 +5,12 @@ import { navigateToCommunity, useCommonNavigate } from 'navigation/helpers';
 import app from 'state';
 import { useGetCommunityByIdQuery } from 'state/api/communities';
 import CollapsableSidebarButton from 'views/components/sidebar/CollapsableSidebarButton';
+import { handleMouseEnter, handleMouseLeave } from 'views/menus/utils';
+import { smartTrim } from '../../../../../../shared/utils';
 import { Skeleton } from '../../Skeleton';
 import { CWCommunityAvatar } from '../../component_kit/cw_community_avatar';
 import { CWText } from '../../component_kit/cw_text';
+import { CWTooltip } from '../../component_kit/new_designs/CWTooltip';
 
 const SidebarHeader = ({
   isInsideCommunity,
@@ -37,18 +40,30 @@ const SidebarHeader = ({
           navigateToCommunity({ navigate, path: '', chain: app.chain.id })
         }
       />
-
-      <CWText
-        className="header"
-        type="h5"
-        onClick={() =>
-          app.chain.id &&
-          navigateToCommunity({ navigate, path: '', chain: app.chain.id })
+      <CWTooltip
+        content={
+          community?.name && community.name.length > 17 ? community.name : null
         }
-      >
-        {community?.name || <Skeleton width="70%" />}
-      </CWText>
-
+        placement="top"
+        renderTrigger={(handleInteraction, isTooltipOpen) => (
+          <CWText
+            className="header"
+            type="h5"
+            onClick={() =>
+              app.chain.id &&
+              navigateToCommunity({ navigate, path: '', chain: app.chain.id })
+            }
+            onMouseEnter={(e) => {
+              handleMouseEnter({ e, isTooltipOpen, handleInteraction });
+            }}
+            onMouseLeave={(e) => {
+              handleMouseLeave({ e, isTooltipOpen, handleInteraction });
+            }}
+          >
+            {smartTrim(community?.name, 17) || <Skeleton width="70%" />}
+          </CWText>
+        )}
+      />
       {isInsideCommunity && (
         <CollapsableSidebarButton
           isInsideCommunity={isInsideCommunity}

diff --git a/packages/commonwealth/shared/utils.ts b/packages/commonwealth/shared/utils.ts
@@ -29,7 +29,11 @@ export const getCommunityUrl = (community: string): string => {
     : `http://localhost:8080/${community}`;
 };
 
-export const smartTrim = (text, maxLength = 200) => {
+export const smartTrim = (
+  text: string | undefined,
+  maxLength = 200,
+): string => {
+  if (!text) return '';
   if (text.length > maxLength) {
     const smartTrimmedText = text.slice(0, maxLength).replace(/\W+$/, '');
     if (smartTrimmedText.length === 0) return `${text.slice(0, maxLength)}...`;