refactor(global): extrac common menu

src/spec/menu.d.ts

@@ -9,3 +9,13 @@ export type TMenu =
   | 'ARROW_TO_BOTTOM'
   | 'SETTING'
   | 'DELETE'
+  // commont
+  | 'TODO'
+  | 'WIP'
+  | 'DONE'
+  | 'FEATURE'
+  | 'BUG'
+  | 'HELP'
+  | 'OTHER'
+  | 'ALL'
+  | 'TOOL'

src/widgets/ArticlesFilter/DesktopView.tsx

@@ -50,14 +50,13 @@ const ArticlesFilter: FC<TProps> = ({
       {!searchMode && (
         <Fragment>
           <SortFilter onSelect={onSelect} activeFilter={activeFilter} />
-          <Space right={2} />
           <CatSelector
             activeCat={activeCat}
             onSelect={setActiveCat}
             selected={activeCat !== ARTICLE_CAT.ALL}
           />
-          <Space right={2} />
           <StateSelector mode={ARTICLE_STATE_MODE.FILTER} />
+          <Space right={10} />
           <SpaceGrow />
           <DesktopOnly>
             {resState === TYPE.RES_STATE.LOADING && <LavaLampLoading right={28} left={10} />}

src/widgets/ArticlesFilter/ModelineView.tsx

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

src/widgets/ArticlesFilter/SortFilter.tsx

@@ -11,21 +11,21 @@ type TProps = {
   activeFilter: TArticleFilter
   onSelect: (filter: TArticleFilter) => void
   noArrow?: boolean
-  tooltipPlacement?: TTooltipPlacement
+  placement?: TTooltipPlacement
 }
 
 const SortFilter: FC<TProps> = ({
   onSelect,
   activeFilter,
   noArrow = false,
-  tooltipPlacement = 'bottom-start',
+  placement = 'bottom-start',
 }) => {
   const [menuOpen, setMenuOpen] = useState(false)
 
   return (
     <Tooltip
       trigger="click"
-      placement={tooltipPlacement}
+      placement={placement}
       onShow={() => setMenuOpen(true)}
       onHide={() => setMenuOpen(false)}
       offset={[-30, 5]}

src/widgets/Buttons/DropdownButton/index.tsx

@@ -7,7 +7,14 @@ import usePrimaryColor from '@/hooks/usePrimaryColor'
 
 import { buildLog } from '@/logger'
 
-import { Wrapper, ButtonWrapper, InnerBtnWrapper, FilterIcon } from '../styles/dropdown_button'
+import {
+  Wrapper,
+  ButtonWrapper,
+  InnerBtnWrapper,
+  FilterIcon,
+  CloseWrapper,
+  CloseIcon,
+} from '../styles/dropdown_button'
 
 const log = buildLog('C:DropdownButton')
 
@@ -16,8 +23,10 @@ type TProps = {
   size?: TSizeTS
   withBorder?: boolean
   onClick?: () => void
+  onClear?: () => void
   noArrow?: boolean
   selected?: boolean
+  closable?: boolean
 } & TSpace &
   TActive
 
@@ -26,9 +35,11 @@ const DropdownButton: FC<TProps> = ({
   size = SIZE.SMALL,
   withBorder = false,
   onClick = log,
+  onClear = log,
   noArrow = false,
   $active = false,
   selected = false,
+  closable = false,
   ...restProps
 }) => {
   const primaryColor = usePrimaryColor()
@@ -46,9 +57,21 @@ const DropdownButton: FC<TProps> = ({
       <ButtonWrapper size="small" type="primary" ghost>
         <InnerBtnWrapper $active={$active} primaryColor={primaryColor}>
           <>{children}</>
-          {!noArrow && (
+          {!noArrow && !(closable && selected) && (
             <FilterIcon $active={$active} selected={selected} primaryColor={primaryColor} />
           )}
+
+          {closable && selected && (
+            <CloseWrapper
+              primaryColor={primaryColor}
+              onClick={(e) => {
+                e.preventDefault()
+                onClear()
+              }}
+            >
+              <CloseIcon primaryColor={primaryColor} />
+            </CloseWrapper>
+          )}
         </InnerBtnWrapper>
       </ButtonWrapper>
     </Wrapper>

src/widgets/Buttons/PublishButton/index.tsx

@@ -10,11 +10,11 @@ import { buildLog } from '@/logger'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
 import useViewingThread from '@/hooks/useViewingThread'
 
-import Tooltip from '@/widgets/Tooltip'
-import FullPanel from '@/widgets/CatSelector/FullPanel'
+import { POST_CAT_MENU_ITEMS } from '@/constant/menu'
 
-import { MORE_MENU } from './constant'
+import Menu from '@/widgets/Menu'
 
+import { MORE_MENU } from './constant'
 import PostLayout from './PostLayout'
 import SidebarHeaderLayout from './SidebarHeaderLayout'
 
@@ -55,12 +55,16 @@ const PublishButton: FC<TProps> = ({
 
   return (
     <Wrapper {...restProps}>
-      <Tooltip
-        placement={placement}
-        trigger="click"
-        onShow={() => setShow(true)}
+      <Menu
         offset={offset as [number, number]}
-        content={<>{show && <FullPanel onSelect={onMenuSelect} activeCat={null} />}</>}
+        placement={placement}
+        items={POST_CAT_MENU_ITEMS}
+        // onSelect={(item) => handleSelect(item.key as TArticleState)}
+        // onShow={() => setMenuOpen(true)}
+        // onHide={() => setMenuOpen(false)}
+        // activeKey={activeCat}
+        popWidth={192}
+        withDesc
       >
         <PubButton
           primaryColor={primaryColor}
@@ -69,7 +73,7 @@ const PublishButton: FC<TProps> = ({
           {mode === PUBLISH_MODE.DEFAULT && <PostLayout text={_text} />}
           {mode === PUBLISH_MODE.SIDEBAR_LAYOUT_HEADER && <SidebarHeaderLayout text={text} />}
         </PubButton>
-      </Tooltip>
+      </Menu>
     </Wrapper>
   )
 }

src/widgets/Buttons/styles/dropdown_button/index.ts

@@ -6,6 +6,7 @@ import css, { theme, primaryTheme, primaryLightTheme } from '@/css'
 
 import Button from '@/widgets/Buttons/Button'
 import ArrowSVG from '@/icons/ArrowSimple'
+import CloseSVG from '@/icons/CloseCross'
 
 type TWrapper = { withBorder: boolean; size: TSizeTS; selected: boolean } & TSpace &
   TActive &
@@ -82,3 +83,31 @@ export const FilterIcon = styled(ArrowSVG)<TFilterIcon>`
     opacity: 0.6;
   `};
 `
+
+export const CloseWrapper = styled.div<TPrimaryColor>`
+  ${css.circle(16)};
+  ${css.row('align-both')};
+  margin-left: 4px;
+
+  color: ${({ primaryColor }) => primaryTheme(primaryColor)};
+
+  &:hover {
+    color: ${theme('button.fg')};
+    background: ${({ primaryColor }) => primaryTheme(primaryColor)};
+    cursor: pointer;
+  }
+
+  transition: all 0.2s;
+`
+export const CloseIcon = styled(CloseSVG)<TPrimaryColor>`
+  fill: ${({ primaryColor }) => primaryTheme(primaryColor)};
+  ${css.size(12)};
+  transform: rotate(-90deg);
+  opacity: 0.8;
+
+  ${CloseWrapper}:hover & {
+    fill: ${theme('button.fg')};
+    opacity: 1;
+  }
+  transition: all 0.2s;
+`

src/widgets/CatSelector/ActiveLabel.tsx

@@ -5,7 +5,7 @@ import type { TArticleCat } from '@/spec'
 import { Trans } from '@/i18n'
 import usePrimaryColor from '@/hooks/usePrimaryColor'
 
-import { Wrapper, Icon } from './styles/active_label'
+import { Wrapper, Icon, Title } from './styles/active_label'
 
 type TProps = {
   cat: TArticleCat
@@ -18,7 +18,7 @@ const ActiveLabel: FC<TProps> = ({ cat }) => {
   return (
     <Wrapper primaryColor={primaryColor}>
       <ActiveIcon primaryColor={primaryColor} />
-      {Trans(cat)}
+      <Title>{Trans(cat)}</Title>
     </Wrapper>
   )
 }