From 9dea61abbda784fe2d5eab8862a5453e7f54c9e7 Mon Sep 17 00:00:00 2001
From: israellund <israelmlund@gmail.com>
Date: Fri, 18 Oct 2024 16:47:13 -0400
Subject: [PATCH 1/2] truncated long community names in sidebar header

---
 .../CWSidebarHeader/CWSidebarHeader.tsx       | 39 +++++++++++++------
 packages/commonwealth/shared/utils.ts         |  6 ++-
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
index e0f2386d1f2..4f6993932fe 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
+++ b/packages/commonwealth/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,
@@ -23,7 +26,7 @@ const SidebarHeader = ({
     id: communityId,
     enabled: !!communityId,
   });
-
+  console.log('community', community?.name);
   return (
     <div className="SidebarHeader">
       <CWCommunityAvatar
@@ -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
index ff86b23e2fe..781849a6ec5 100644
--- 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)}...`;

From fc7c574ac4a17a75bb3ff4aadf0d7b51c26f9214 Mon Sep 17 00:00:00 2001
From: israellund <israelmlund@gmail.com>
Date: Fri, 18 Oct 2024 17:03:54 -0400
Subject: [PATCH 2/2] deleted console log

---
 .../component_kit/CWSidebarHeader/CWSidebarHeader.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx b/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
index 4f6993932fe..ec8c4b7c874 100644
--- a/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
+++ b/packages/commonwealth/client/scripts/views/components/component_kit/CWSidebarHeader/CWSidebarHeader.tsx
@@ -26,7 +26,7 @@ const SidebarHeader = ({
     id: communityId,
     enabled: !!communityId,
   });
-  console.log('community', community?.name);
+
   return (
     <div className="SidebarHeader">
       <CWCommunityAvatar