imprv separate taglistdata amd tagclouddata

packages/app/src/components/Sidebar/Tag.tsx

@@ -10,6 +10,7 @@ import TagList from '../TagList';
 
 
 const PAGING_LIMIT = 10;
+const TAG_CLOUD_LIMIT = 20;
 
 const Tag: FC = () => {
   const [activePage, setActivePage] = useState<number>(1);
@@ -20,6 +21,9 @@ const Tag: FC = () => {
   const totalCount: number = tagDataList?.totalCount || 0;
   const isLoading = tagDataList === undefined && error == null;
 
+  const { data: tagDataCloud } = useSWRxTagsList(TAG_CLOUD_LIMIT, 0);
+  const tagCloudData: IDataTagCount[] = tagDataCloud?.data || [];
+
   const { t } = useTranslation('');
 
   const setOffsetByPageNumber = useCallback((selectedPageNumber: number) => {
@@ -77,7 +81,7 @@ const Tag: FC = () => {
       <h2 className="my-3">{t('popular_tags')}</h2>
 
       <div className="px-3 text-center">
-        <TagCloudBox tags={tagData} />
+        <TagCloudBox tags={tagCloudData} />
       </div>
     </div>
   );

packages/app/src/components/TagCloudBox.tsx

@@ -16,34 +16,26 @@ const defaultProps = {
   isDisableRandomColor: true,
 };
 
-const MIN_FONT_SIZE = 10;
-const MAX_FONT_SIZE = 24;
 const MAX_TAG_TEXT_LENGTH = 8;
 
 const TagCloudBox: FC<Props> = memo((props:(Props & typeof defaultProps)) => {
-  const {
-    tags, minSize, maxSize, isDisableRandomColor,
-  } = props;
+  const { tags } = props;
   const maxTagTextLength: number = props.maxTagTextLength ?? MAX_TAG_TEXT_LENGTH;
 
+
+  const tagElements = tags.map((tag:IDataTagCount) => {
+    const tagFormat = (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name;
+    return (
+      <a key={tag.name} href={`/_search?q=tag:${tag.name}`} className="grw-tag-label badge badge-secondary mr-3">
+        {tagFormat}
+      </a>
+    );
+  });
+
   return (
-    <>
-      <TagCloud
-        minSize={minSize ?? MIN_FONT_SIZE}
-        maxSize={maxSize ?? MAX_FONT_SIZE}
-        tags={tags.map((tag:IDataTagCount) => {
-          return {
-            // text truncation
-            value: (tag.name).length > maxTagTextLength ? `${(tag.name).slice(0, maxTagTextLength)}...` : tag.name,
-            count: tag.count,
-          };
-        })}
-        disableRandomColor={isDisableRandomColor}
-        style={{ cursor: 'pointer' }}
-        className="simple-cloud text-secondary"
-        onClick={(target) => { window.location.href = `/_search?q=tag:${encodeURIComponent(target.value)}` }}
-      />
-    </>
+    <div className="grw-popular-tag-labels">
+      {tagElements}
+    </div>
   );
 
 });

packages/app/src/styles/_tag.scss

@@ -12,6 +12,16 @@
   }
 }
 
+.grw-popular-tag-labels {
+  text-align: left;
+
+  .grw-tag-label {
+    font-size: 10px;
+    font-weight: normal;
+    border-radius: $border-radius;
+  }
+}
+
 #edit-tag-modal {
   .form-control {
     height: auto;

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -467,6 +467,16 @@ ul.pagination {
   }
 }
 
+/*
+ * GROWI popular tags
+ */
+.grw-popular-tag-labels {
+  .grw-tag-label {
+    color: $color-tags;
+    background-color: $bgcolor-tags;
+  }
+}
+
 /*
  * admin settings
  */

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -350,6 +350,16 @@ $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
   }
 }
 
+/*
+ * GROWI popular tags
+ */
+.grw-popular-tag-labels {
+  .grw-tag-label {
+    color: $color-tags;
+    background-color: $bgcolor-tags;
+  }
+}
+
 /*
 * grw-side-contents
 */