refactor(custom-links): to sidebar tabber digest (#141)

* chore: add account to tabber banner

* chore: adjust account for header digest

* chore: style

* refactor(filter-menu): adjust codebase

* refactor(extra-links): move logic to hooks

* refactor(community-digest): rename classic/simple -> tabber/header

* chore(media-reports): cut rest width adjust

* refactor(rename): extraLinks -> customHeaderLinks

* chore: clean up

* chore: rename

* refactor(tabber): allow icon with option

* refactor(tabber): add customlink

* refactor(sidebar): replace doc icon

src/containers/thread/AboutThread/MediaReports.tsx

@@ -1,8 +1,11 @@
 import { FC } from 'react'
+import { observer } from 'mobx-react'
 
 import type { TMediaReport } from '@/spec'
 import { sortByIndex } from '@/helper'
 
+import useBannerLayout from '@/hooks/useBannerLayout'
+
 import {
   Wrapper,
   PreviewWrapper,
@@ -19,6 +22,8 @@ type TProps = {
 }
 
 const MediaReports: FC<TProps> = ({ items }) => {
+  const bannerLayout = useBannerLayout()
+
   return (
     <Wrapper>
       {/* @ts-ignore */}
@@ -33,7 +38,7 @@ const MediaReports: FC<TProps> = ({ items }) => {
               <SiteName>{siteName}</SiteName>
             </Brand>
 
-            <Title href={url} target="_blank">
+            <Title href={url} target="_blank" bannerLayout={bannerLayout}>
               {title}
             </Title>
             <ArrowBox>
@@ -46,4 +51,4 @@ const MediaReports: FC<TProps> = ({ items }) => {
   )
 }
 
-export default MediaReports
+export default observer(MediaReports)

src/containers/thread/AboutThread/styles/media_reports.ts

@@ -1,6 +1,9 @@
 import styled from 'styled-components'
 import Link from 'next/link'
 
+import type { TBannerLayout } from '@/spec'
+import { BANNER_LAYOUT } from '@/constant/layout'
+
 import css, { theme } from '@/css'
 import ArrowSVG from '@/icons/ArrowUpRight'
 import Img from '@/Img'
@@ -29,11 +32,13 @@ export const SiteName = styled.div`
   font-size: 12px;
   word-break: keep-all;
 `
-export const Title = styled(Link)`
+export const Title = styled(Link)<{ bannerLayout: TBannerLayout }>`
   color: ${theme('article.digest')};
   text-decoration: none;
   font-size: 14px;
-  ${css.cutRest('130px')};
+  ${({ bannerLayout }) =>
+    bannerLayout === BANNER_LAYOUT.SIDEBAR ? css.cutRest('220px') : css.cutRest('130px')};
+
   margin-top: -1px;
 
   &:hover {

src/containers/thread/DashboardThread/Header/Templates/Center.tsx

@@ -6,7 +6,7 @@ import type { TActive, TCommunityThread, TLinkItem } from '@/spec'
 import { THREAD } from '@/constant/thread'
 import { HEADER_LAYOUT } from '@/constant/layout'
 
-import ExtraLinks from '@/widgets/ExtraLinks/HeaderTemplate'
+import CustomHeaderLinks from '@/widgets/CustomHeaderLinks/HeaderTemplate'
 
 import {
   Wrapper,
@@ -41,7 +41,7 @@ const Center: FC<TProps> = ({ $active, threads, links }) => {
         {_threads.map((thread: TCommunityThread) => (
           <LinkItem key={thread.slug}>{thread.title}</LinkItem>
         ))}
-        <ExtraLinks links={links} />
+        <CustomHeaderLinks links={links} />
       </CenterWrapper>
       <RightWrapper>
         <AccountIcon />

src/containers/thread/DashboardThread/Header/Templates/Float.tsx

@@ -6,7 +6,7 @@ import type { TActive, TCommunityThread, TLinkItem } from '@/spec'
 import { THREAD } from '@/constant/thread'
 import { HEADER_LAYOUT } from '@/constant/layout'
 
-import ExtraLinks from '@/widgets/ExtraLinks/HeaderTemplate'
+import CustomHeaderLinks from '@/widgets/CustomHeaderLinks/HeaderTemplate'
 
 import {
   Wrapper,
@@ -42,7 +42,7 @@ const Float: FC<TProps> = ({ $active, threads, links }) => {
           <LinkItem key={thread.slug}>{thread.title}</LinkItem>
         ))}
 
-        <ExtraLinks links={links} />
+        <CustomHeaderLinks links={links} />
       </CenterWrapper>
       <RightWrapper>
         <AccountIcon />

src/containers/thread/DashboardThread/Header/Templates/Right.tsx

@@ -5,7 +5,7 @@ import type { TActive, TCommunityThread, TLinkItem } from '@/spec'
 import { THREAD } from '@/constant/thread'
 import { HEADER_LAYOUT } from '@/constant/layout'
 
-import ExtraLinks from '@/widgets/ExtraLinks/HeaderTemplate'
+import CustomHeaderLinks from '@/widgets/CustomHeaderLinks/HeaderTemplate'
 
 import {
   Wrapper,
@@ -41,7 +41,7 @@ const Right: FC<TProps> = ({ $active, threads, links }) => {
           <LinkItem key={thread.slug}>{thread.title}</LinkItem>
         ))}
 
-        <ExtraLinks links={links} />
+        <CustomHeaderLinks links={links} />
 
         <AccountIcon />
       </RightWrapper>

src/containers/thread/DashboardThread/store/Models.ts

@@ -147,7 +147,7 @@ export const settingsModalFields = {
   docFaqLayout: T.opt(T.enum(values(DOC_FAQ_LAYOUT)), DOC_FAQ_LAYOUT.COLLAPSE),
   avatarLayout: T.opt(T.enum(values(AVATAR_LAYOUT)), AVATAR_LAYOUT.SQUARE),
   brandLayout: T.opt(T.enum(values(BRAND_LAYOUT)), BRAND_LAYOUT.BOTH),
-  bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.TABBER),
+  bannerLayout: T.opt(T.enum(values(BANNER_LAYOUT)), BANNER_LAYOUT.SIDEBAR),
   topbarLayout: T.opt(T.enum(values(TOPBAR_LAYOUT)), TOPBAR_LAYOUT.NO),
   topbarBg: T.opt(T.enum(keys(COLORS)), COLOR_NAME.ORANGE),
 

src/containers/thread/DashboardThread/store/index.ts

@@ -55,7 +55,7 @@ import { THREAD } from '@/constant/thread'
 import BStore from '@/utils/bstore'
 import { buildLog } from '@/logger'
 import { T, getParent, markStates, Instance, toJS } from '@/mobx'
-import { washThreads, sortByIndex } from '@/helper'
+import { publicThreads, sortByIndex } from '@/helper'
 
 import {
   PagedCommunities,
@@ -483,7 +483,7 @@ const DashboardThread = T.model('DashboardThread', {
         editingLinkMode: editingLinkMode as TChangeMode,
         editingGroup,
         editingGroupIndex,
-        threads: washThreads(curCommunity.threads, {
+        threads: publicThreads(curCommunity.threads, {
           enable: enableSettings,
           nameAlias: aliasSettings.nameAlias,
         }),
@@ -513,7 +513,7 @@ const DashboardThread = T.model('DashboardThread', {
         editingLinkMode: editingLinkMode as TChangeMode,
         editingGroup,
         editingGroupIndex,
-        threads: washThreads(curCommunity.threads, {
+        threads: publicThreads(curCommunity.threads, {
           enable: enableSettings,
           nameAlias: aliasSettings.nameAlias,
         }),

src/hooks/useHeaderLinks.ts

@@ -1,11 +1,16 @@
 import { useContext } from 'react'
+import { find } from 'ramda'
 import { MobXProviderContext } from 'mobx-react'
 
 import type { TLinkItem, THeaderLayout } from '@/spec'
+import { MORE_GROUP } from '@/constant/dashboard'
+
+import { toJS } from '@/mobx'
 
 type THeaderLinks = {
   layout: THeaderLayout
   links: TLinkItem[]
+  customLinks: TLinkItem[]
 }
 
 /**
@@ -18,9 +23,36 @@ const useHeaderLinks = (): THeaderLinks => {
     throw new Error('Store cannot be null, please add a context provider')
   }
 
+  const { isModerator } = store.accountInfo
+  const { community } = store.viewing
+
+  const { headerLinks } = store.dashboardThread
+  const headerLinksRow = toJS(headerLinks)
+
+  const hasExtraAbout = find((link: TLinkItem) => link.title === '关于', headerLinksRow)
+
+  const aboutLink = !hasExtraAbout
+    ? {
+        index: 999,
+        title: '关于',
+        group: MORE_GROUP,
+        link: `/${community.slug}/about`,
+      }
+    : { title: '', index: 0 }
+
+  const dashboardLink = {
+    index: 1000,
+    title: '控制台',
+    group: MORE_GROUP,
+    link: `/${community.slug}/dashboard`,
+  }
+
+  const customLinks = isModerator ? [...headerLinksRow, aboutLink, dashboardLink] : headerLinksRow
+
   return {
     layout: store.dashboardThread.headerLayout,
     links: store.dashboardThread.headerLinks,
+    customLinks,
   }
 }
 

src/hooks/usePublicThreads.ts

@@ -1,9 +1,11 @@
 import { useContext } from 'react'
 import { MobXProviderContext } from 'mobx-react'
-import { find, propEq } from 'ramda'
+import { find, propEq, reject } from 'ramda'
 
-import type { TCommunityThread, TNameAliasConfig } from '@/spec'
+import type { TCommunityThread, TLinkItem, TNameAliasConfig } from '@/spec'
+import { THREAD } from '@/constant/thread'
 
+import { toJS } from '@/mobx'
 import { sortByIndex } from '@/helper'
 
 /**
@@ -31,6 +33,17 @@ const usePublicThreads = (): TCommunityThread[] => {
     }
   })
 
+  const { headerLinks } = store.dashboardThread
+  const headerLinksRow = toJS(headerLinks)
+
+  const hasExtraAbout = find((link: TLinkItem) => link.title === '关于', headerLinksRow)
+
+  if (hasExtraAbout) {
+    return reject(
+      (item: TCommunityThread) => item.slug === THREAD.ABOUT,
+      mappedThreads as TCommunityThread[],
+    ) as TCommunityThread[]
+  }
   return mappedThreads as TCommunityThread[]
 }
 

src/spec/article.d.ts

@@ -200,7 +200,14 @@ export type TArticleCatReject =
   | 'REJECT_REPRO'
   | 'REJECT_STALE'
 
-export type TArticleState = 'TODO' | 'WIP' | 'DONE' | 'RESOLVED' | 'DEFAULT' | TArticleCatReject
+export type TArticleState =
+  | 'ALL'
+  | 'TODO'
+  | 'WIP'
+  | 'DONE'
+  | 'RESOLVED'
+  | 'DEFAULT'
+  | TArticleCatReject
 
 export type TArticleCat = 'ALL' | 'BUG' | 'FEATURE' | 'QUESTION' | 'OTHER'
 

src/spec/dashboard.d.ts

@@ -1,5 +1,4 @@
 import type { TColorName } from './color'
-import type { TLinkItem } from './utils'
 
 export type TAvatarLayout = 'circle' | 'square'
 export type TBrandLayout = 'both' | 'logo' | 'text'
@@ -55,7 +54,6 @@ export type TNameAliasConfig = {
 export type TDashboardThreadConfig = {
   enable: TEnableConfig
   nameAlias: TNameAliasConfig[]
-  extraLinks?: TLinkItem[]
 }
 
 export type TDashboardSEOConfig = {

src/widgets/AccountUnit/index.tsx

@@ -12,21 +12,27 @@ import { buildLog } from '@/logger'
 import useAccount from '@/hooks/useAccount'
 import useAvatarLayout from '@/hooks/useAvatarLayout'
 
-import { NormalWrapper, WithNameWrapper, Avatar, UnloginIcon, NickName } from './styles'
+import { NormalWrapper, WithBgWrapper, Avatar, UnloginIcon, NickName } from './styles'
 
 /* eslint-disable-next-line */
 const log = buildLog('c:AccountUnit:index')
 
 type TProps = {
   testid?: string
+  withBg?: boolean
   withName?: boolean
 } & TSpace
 
-const AccountUnit: FC<TProps> = ({ testid = 'account-unit', withName = false, ...restProps }) => {
+const AccountUnit: FC<TProps> = ({
+  testid = 'account-unit',
+  withBg = false,
+  withName = false,
+  ...restProps
+}) => {
   const { isLogin, avatar, nickname } = useAccount()
   const avatarLayout = useAvatarLayout()
 
-  const Wrapper = withName ? WithNameWrapper : NormalWrapper
+  const Wrapper = withBg ? WithBgWrapper : NormalWrapper
 
   return (
     <Wrapper {...restProps}>

src/widgets/AccountUnit/styles/index.ts

@@ -12,15 +12,17 @@ export const NormalWrapper = styled.div<TSpace>`
 
   ${(props) => css.spaceMargins(props)};
 `
-export const WithNameWrapper = styled(NormalWrapper)`
+export const WithBgWrapper = styled(NormalWrapper)`
   border: 1px solid;
   border-color: ${theme('divider')};
   border-radius: 10px;
   padding: 5px 8px;
-  width: 140px;
+  width: auto;
+  background: ${theme('alphaBg')};
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 
   &:hover {
-    background: ${theme('hoverBg')};
+    background: ${theme('alphaBg2')};
     cursor: pointer;
   }
 `

src/widgets/ArticlesFilter/DesktopView.tsx

@@ -51,7 +51,11 @@ const ArticlesFilter: FC<TProps> = ({
         <Fragment>
           <SortFilter onSelect={onSelect} activeFilter={activeFilter} />
           <Space right={2} />
-          <CatSelector activeCat={activeCat} onSelect={setActiveCat} />
+          <CatSelector
+            activeCat={activeCat}
+            onSelect={setActiveCat}
+            selected={activeCat !== ARTICLE_CAT.ALL}
+          />
           <Space right={2} />
           <StateSelector mode={ARTICLE_STATE_MODE.FILTER} />
           <SpaceGrow />

src/widgets/ArticlesFilter/FilterPanel/index.tsx

@@ -18,7 +18,7 @@ const FilterPanel: FC<TProps> = ({ activeFilter, onSelect }) => {
         <IconWrapper>
           <Icon.ALL />
         </IconWrapper>
-        <Title>默认排序</Title>
+        <Title>排序</Title>
       </Block>
       <Block>
         <IconWrapper>

src/widgets/ArticlesFilter/ModelineView.tsx

@@ -43,21 +43,11 @@ const ArticlesFilter: FC<TProps> = ({
     <ModelineWrapper>
       <TagSelector groupedTags={groupedTags} activeTag={activeTag} mode="modeline" />
       <Space right={6} />
-      <SortFilter
-        onSelect={onSelect}
-        activeFilter={activeFilter}
-        tooltipPlacement="top-start"
-        noArrow
-      />
-      <CatSelector
-        activeCat={activeCat}
-        onSelect={setActiveCat}
-        tooltipPlacement="top-start"
-        noArrow
-      />
+      <SortFilter onSelect={onSelect} activeFilter={activeFilter} tooltipPlacement="top-start" />
+      <CatSelector activeCat={activeCat} onSelect={setActiveCat} tooltipPlacement="top-start" />
 
       {modelineExpand && (
-        <StateSelector mode={ARTICLE_STATE_MODE.FILTER} tooltipPlacement="top-start" noArrow />
+        <StateSelector mode={ARTICLE_STATE_MODE.FILTER} tooltipPlacement="top-start" />
       )}
 
       {/* <SearchBox searchMode={searchMode} onSearch={onSearch} closeSearch={closeSearch} /> */}

src/widgets/ArticlesFilter/SortFilter.tsx

@@ -4,7 +4,6 @@ import type { TArticleFilter, TTooltipPlacement } from '@/spec'
 
 import Tooltip from '@/widgets/Tooltip'
 import DropdownButton from '@/widgets/Buttons/DropdownButton'
-import { DesktopOnly, MobileOnly } from '@/widgets/Common'
 
 import FilterPanel from './FilterPanel'
 
@@ -25,9 +24,8 @@ const SortFilter: FC<TProps> = ({
 
   return (
     <Tooltip
-      placement={tooltipPlacement}
       trigger="click"
-      hideOnClick={false}
+      placement={tooltipPlacement}
       onShow={() => setMenuOpen(true)}
       onHide={() => setMenuOpen(false)}
       offset={[-30, 5]}
@@ -39,8 +37,7 @@ const SortFilter: FC<TProps> = ({
       }
     >
       <DropdownButton left={-10} noArrow={noArrow} $active={menuOpen}>
-        <DesktopOnly>默认排序</DesktopOnly>
-        <MobileOnly>排序</MobileOnly>
+        <div>排序</div>
       </DropdownButton>
     </Tooltip>
   )