Feat/new search tag page

lang/default.json

@@ -609,6 +609,10 @@
     "defaultMessage": "Unpin from profile",
     "description": "src/views/User/Articles/PinBoard/UnPinButton/index.tsx"
   },
+  "8GXAUX": {
+    "defaultMessage": "All results for",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "8KFsZN": {
     "defaultMessage": "Read Counts"
   },
@@ -2040,6 +2044,9 @@
   "Y8zV4A": {
     "defaultMessage": "Write a comment"
   },
+  "YDMrKK": {
+    "defaultMessage": "Users"
+  },
   "YPMn9n": {
     "defaultMessage": "Please log in.",
     "description": "UNAUTHENTICATED"
@@ -2256,6 +2263,10 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {article} other {articles}}"
   },
+  "cd8EmU": {
+    "defaultMessage": "of search results",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "cg1VJ2": {
     "defaultMessage": "Connect Wallet"
   },

lang/en.json

@@ -609,6 +609,10 @@
     "defaultMessage": "Unpin from profile",
     "description": "src/views/User/Articles/PinBoard/UnPinButton/index.tsx"
   },
+  "8GXAUX": {
+    "defaultMessage": "All results for",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "8KFsZN": {
     "defaultMessage": "Read Counts"
   },
@@ -2040,6 +2044,9 @@
   "Y8zV4A": {
     "defaultMessage": "Write a comment"
   },
+  "YDMrKK": {
+    "defaultMessage": "Users"
+  },
   "YPMn9n": {
     "defaultMessage": "Please log in.",
     "description": "UNAUTHENTICATED"
@@ -2256,6 +2263,10 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {article} other {articles}}"
   },
+  "cd8EmU": {
+    "defaultMessage": "",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "cg1VJ2": {
     "defaultMessage": "Connect Wallet"
   },

lang/zh-Hans.json

@@ -609,6 +609,10 @@
     "defaultMessage": "取消代表作",
     "description": "src/views/User/Articles/PinBoard/UnPinButton/index.tsx"
   },
+  "8GXAUX": {
+    "defaultMessage": "有关",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "8KFsZN": {
     "defaultMessage": "阅读次数"
   },
@@ -2040,6 +2044,9 @@
   "Y8zV4A": {
     "defaultMessage": "回复评论"
   },
+  "YDMrKK": {
+    "defaultMessage": "用户"
+  },
   "YPMn9n": {
     "defaultMessage": "请先登入再进行操作",
     "description": "UNAUTHENTICATED"
@@ -2256,6 +2263,10 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {篇文章} other {篇文章}}"
   },
+  "cd8EmU": {
+    "defaultMessage": "的搜索结果",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "cg1VJ2": {
     "defaultMessage": "连接加密钱包"
   },

lang/zh-Hant.json

@@ -609,6 +609,10 @@
     "defaultMessage": "取消代表作",
     "description": "src/views/User/Articles/PinBoard/UnPinButton/index.tsx"
   },
+  "8GXAUX": {
+    "defaultMessage": "有關",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "8KFsZN": {
     "defaultMessage": "閱讀次數"
   },
@@ -2040,6 +2044,9 @@
   "Y8zV4A": {
     "defaultMessage": "回覆評論"
   },
+  "YDMrKK": {
+    "defaultMessage": "用戶"
+  },
   "YPMn9n": {
     "defaultMessage": "請先登入再進行操作",
     "description": "UNAUTHENTICATED"
@@ -2256,6 +2263,10 @@
   "cd/II9": {
     "defaultMessage": "{totalCount, plural, =1 {篇文章} other {篇文章}}"
   },
+  "cd8EmU": {
+    "defaultMessage": "的檢索結果",
+    "description": "src/views/Search/AggregateResults/index.tsx"
+  },
   "cg1VJ2": {
     "defaultMessage": "連接加密錢包"
   },

src/views/Search/AggregateResults/Tabs.tsx

@@ -0,0 +1,47 @@
+import { useIntl } from 'react-intl'
+
+import { SquareTabs } from '~/components'
+
+import styles from './styles.module.css'
+
+export type TABS = 'article' | 'user' | 'tag'
+
+type TabsProps = {
+  tab: TABS
+  setTab: (tab: TABS) => void
+}
+
+export const Tabs = ({ tab, setTab }: TabsProps) => {
+  const intl = useIntl()
+
+  return (
+    <section className={styles.tabs}>
+      <SquareTabs>
+        <SquareTabs.Tab
+          selected={tab === 'article'}
+          onClick={() => setTab('article')}
+          title={intl.formatMessage({
+            defaultMessage: 'Articles',
+            id: '3KNMbJ',
+          })}
+        />
+        <SquareTabs.Tab
+          selected={tab === 'user'}
+          onClick={() => setTab('user')}
+          title={intl.formatMessage({
+            defaultMessage: 'Users',
+            id: 'YDMrKK',
+          })}
+        />
+        <SquareTabs.Tab
+          selected={tab === 'tag'}
+          onClick={() => setTab('tag')}
+          title={intl.formatMessage({
+            defaultMessage: 'Tags',
+            id: '1EYCdR',
+          })}
+        />
+      </SquareTabs>
+    </section>
+  )
+}

src/views/Search/AggregateResults/Tags.tsx

@@ -1,15 +1,14 @@
-import { Fragment, useEffect } from 'react'
+import { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import {
   LATER_SEARCH_RESULTS_LENGTH,
   MAX_SEARCH_RESULTS_LENGTH,
 } from '~/common/enums'
-import { analytics, mergeConnections, toPath } from '~/common/utils'
+import { analytics, mergeConnections } from '~/common/utils'
 import {
   EmptySearch,
   InfiniteScroll,
-  Menu,
   SpinnerBlock,
   TagDigest,
   Translate,
@@ -104,18 +103,13 @@ const AggregateTagResults = () => {
           <FormattedMessage defaultMessage="End of the results" id="ui1+QC" />
         }
       >
-        <Menu>
+        <ul className={styles.tagList}>
           {edges.map(
             ({ node, cursor }, i) =>
               node.__typename === 'Tag' && (
-                <Fragment key={cursor + node.id}>
-                  <Menu.Item
-                    spacing={[16, 0]}
-                    {...toPath({
-                      page: 'tagDetail',
-                      tag: node,
-                    })}
-                    bgActiveColor="none"
+                <li key={cursor} className={styles.tagListItem}>
+                  <TagDigest.Feed
+                    tag={node}
                     onClick={() =>
                       analytics.trackEvent('click_feed', {
                         type: 'search_tag',
@@ -125,13 +119,11 @@ const AggregateTagResults = () => {
                         searchKey: q,
                       })
                     }
-                  >
-                    <TagDigest.Concise tag={node} showArticlesNum />
-                  </Menu.Item>
-                </Fragment>
+                  />
+                </li>
               )
           )}
-        </Menu>
+        </ul>
       </InfiniteScroll>
     </section>
   )

src/views/Search/AggregateResults/gql.ts

@@ -60,13 +60,13 @@ export const SEARCH_AGGREGATE_TAGS_PUBLIC = gql`
         cursor
         node {
           ... on Tag {
-            ...TagDigestConciseTag
+            ...TagDigestFeedTag
           }
         }
       }
     }
   }
-  ${TagDigest.Concise.fragments.tag}
+  ${TagDigest.Feed.fragments.tag}
 `
 
 export const SEARCH_AGGREGATE_USERS_PUBLIC = gql`

src/views/Search/AggregateResults/index.tsx

@@ -1,8 +1,9 @@
 import { useApolloClient } from '@apollo/react-hooks'
 import { useEffect, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
 
 import { getSearchType } from '~/common/utils'
-import { Layout, SegmentedTabs, Translate, useRoute } from '~/components'
+import { Layout, useRoute } from '~/components'
 
 import Articles from './Articles'
 import {
@@ -11,6 +12,7 @@ import {
   SEARCH_AGGREGATE_USERS_PUBLIC,
 } from './gql'
 import styles from './styles.module.css'
+import { TABS, Tabs } from './Tabs'
 import Tags from './Tags'
 import Users from './Users'
 
@@ -60,37 +62,26 @@ const AggregateResults = () => {
     <>
       <section className={styles.title}>
         <span className={styles.titleLeft}>
-          <Translate zh_hans="有关" zh_hant="有關" en="All results for" />
+          <FormattedMessage
+            defaultMessage="All results for"
+            id="8GXAUX"
+            description="src/views/Search/AggregateResults/index.tsx"
+          />
         </span>
         <span>
           <span className={styles.titleMiddle}>&nbsp;{q}</span>
         </span>
         <span className={styles.titleRight}>
           &nbsp;
-          <Translate zh_hans="的搜索結果" zh_hant="的檢索結果" en="" />
+          <FormattedMessage
+            defaultMessage="of search results"
+            id="cd8EmU"
+            description="src/views/Search/AggregateResults/index.tsx"
+          />
         </span>
       </section>
 
-      <SegmentedTabs>
-        <SegmentedTabs.Tab
-          selected={isArticle}
-          onClick={() => updateType(Type.ARTICLE)}
-        >
-          <Translate zh_hans="作品" zh_hant="作品" en="Articles" />
-        </SegmentedTabs.Tab>
-        <SegmentedTabs.Tab
-          selected={isUser}
-          onClick={() => updateType(Type.USER)}
-        >
-          <Translate zh_hans="用户" zh_hant="用戶" en="Users" />
-        </SegmentedTabs.Tab>
-        <SegmentedTabs.Tab
-          selected={isTag}
-          onClick={() => updateType(Type.TAG)}
-        >
-          <Translate zh_hans="标签" zh_hant="標籤" en="Tags" />
-        </SegmentedTabs.Tab>
-      </SegmentedTabs>
+      <Tabs tab={type as TABS} setTab={updateType as (tab: TABS) => void} />
 
       <Layout.Main.Spacing hasVertical={false}>
         {isArticle && <Articles />}

src/views/Search/AggregateResults/styles.module.css

@@ -1,14 +1,12 @@
 .title {
   @mixin flex-center-start;
 
-  padding: var(--sp24) var(--sp16) var(--sp16);
+  padding: var(--sp24) var(--sp16) 0;
   font-size: var(--text14);
   font-weight: var(--font-medium);
   color: var(--color-grey);
 
-  @media (--lg-up) {
-    @mixin border-bottom-grey;
-
+  @media (--sm-up) {
     padding-right: 0;
     padding-left: 0;
     font-size: var(--text18);
@@ -28,20 +26,56 @@
   & .titleRight {
     white-space: nowrap;
   }
+}
+
+.result-item {
+  padding: var(--sp16);
+}
+
+.tagList {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: var(--sp32);
+
+  & .tagListItem {
+    @mixin border-bottom-grey-light;
+
+    position: relative;
+    flex: 0 0 50%;
+    padding-bottom: var(--sp20);
+    margin-bottom: var(--sp20);
+    border-style: dashed;
+
+    &:last-child {
+      flex-grow: 1;
+    }
+  }
+
+  @media (--sm-down) {
+    & .tagListItem {
+      &:nth-child(2n + 1) {
+        padding-right: var(--sp16);
+      }
+    }
+  }
 
   @media (--sm-up) {
-    padding-bottom: var(--sp8);
+    & .tagListItem {
+      flex: 0 0 33.3333%;
+
+      &:nth-child(3n + 1),
+      &:nth-child(3n + 2) {
+        padding-right: var(--sp16);
+      }
+    }
   }
 }
 
-.aggregateSection {
+.tabs {
   padding: 0 var(--sp16);
+  margin: var(--sp32) 0 var(--sp16);
 
-  @media (--lg-up) {
+  @media (--sm-up) {
     padding: 0;
   }
 }
-
-.result-item {
-  padding: var(--sp16);
-}