diff --git a/src/components/ArticleItemPrefixLabel/ReadLabel.js b/src/components/ArticleItemPrefixLabel/ReadLabel.tsx
similarity index 68%
rename from src/components/ArticleItemPrefixLabel/ReadLabel.js
rename to src/components/ArticleItemPrefixLabel/ReadLabel.tsx
index 0f4b79b16..0df766185 100755
--- a/src/components/ArticleItemPrefixLabel/ReadLabel.js
+++ b/src/components/ArticleItemPrefixLabel/ReadLabel.tsx
@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 
 import { ReadedLabel } from './styles'
 
-const ReadLabel = ({ entry, accountInfo, topOffset }) => {
+import type { TProps } from './index'
+
+const ReadLabel: FC<TProps> = ({ entry, accountInfo, topOffset = '20px' }) => {
   const { viewerHasViewed } = entry
   const {
     isLogin,
diff --git a/src/components/ArticleItemPrefixLabel/index.js b/src/components/ArticleItemPrefixLabel/index.js
deleted file mode 100755
index 16d83a7da..000000000
--- a/src/components/ArticleItemPrefixLabel/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- *
- * ArticleItemPrefixLabel
- *
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { buildLog } from '@/utils'
-import { PinIcon } from './styles'
-import ReadLabel from './ReadLabel'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:ArticleItemPrefixLabel:index')
-
-const ArticleItemPrefixLabel = ({ entry, accountInfo, topOffset }) => {
-  if (entry.pin) return <PinIcon top={topOffset} />
-
-  return (
-    <ReadLabel entry={entry} accountInfo={accountInfo} topOffset={topOffset} />
-  )
-}
-
-ArticleItemPrefixLabel.propTypes = {
-  accountInfo: T.shape({
-    isLogin: T.bool,
-    customization: T.shape({
-      markViewed: T.bool,
-    }),
-  }).isRequired,
-  entry: T.shape({
-    viewerHasViewed: T.bool,
-    pin: T.bool,
-  }).isRequired,
-  topOffset: T.string,
-}
-
-ArticleItemPrefixLabel.defaultProps = {
-  topOffset: '22px',
-}
-
-export default React.memo(ArticleItemPrefixLabel)
diff --git a/src/components/ArticleItemPrefixLabel/index.tsx b/src/components/ArticleItemPrefixLabel/index.tsx
new file mode 100755
index 000000000..0fb5a9dbe
--- /dev/null
+++ b/src/components/ArticleItemPrefixLabel/index.tsx
@@ -0,0 +1,37 @@
+/*
+ *
+ * ArticleItemPrefixLabel
+ *
+ */
+
+import React, { FC } from 'react'
+
+import type { TAccount } from '@/spec'
+import { buildLog } from '@/utils'
+import { PinIcon } from './styles'
+import ReadLabel from './ReadLabel'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:ArticleItemPrefixLabel:index')
+
+export type TProps = {
+  accountInfo: TAccount
+  topOffset?: string
+  entry: {
+    viewerHasViewed?: boolean
+    isPinned?: boolean
+  }
+}
+const ArticleItemPrefixLabel: FC<TProps> = ({
+  entry,
+  accountInfo,
+  topOffset = '22px',
+}) => {
+  if (entry.isPinned) return <PinIcon top={topOffset} />
+
+  return (
+    <ReadLabel entry={entry} accountInfo={accountInfo} topOffset={topOffset} />
+  )
+}
+
+export default React.memo(ArticleItemPrefixLabel)
diff --git a/src/components/Switcher/Tabs/CardView.js b/src/components/Switcher/Tabs/CardView.tsx
similarity index 69%
rename from src/components/Switcher/Tabs/CardView.js
rename to src/components/Switcher/Tabs/CardView.tsx
index 817221e3e..713e69e9b 100644
--- a/src/components/Switcher/Tabs/CardView.js
+++ b/src/components/Switcher/Tabs/CardView.tsx
@@ -4,9 +4,9 @@
  *
  */
 
-import React, { useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useRef, useState, useCallback } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { buildLog, isString } from '@/utils'
 import { SIZE } from '@/constant'
 
@@ -20,12 +20,25 @@ const log = buildLog('c:Tabs:index')
 const temItems = [
   {
     title: '帖子',
-    // icon: `${ICON_CMD}/navi/fire.svg`,
+    raw: 'posts',
     localIcon: 'settings',
   },
 ]
 
-const Tabs = ({ size, onChange, items, activeKey }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+}) => {
   const [tabWidthList, setTabWidthList] = useState([])
 
   const navRef = useRef(null)
@@ -69,29 +82,4 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-}
-
 export default React.memo(Tabs)
diff --git a/src/components/Switcher/Tabs/DesktopView.js b/src/components/Switcher/Tabs/DesktopView.tsx
similarity index 76%
rename from src/components/Switcher/Tabs/DesktopView.js
rename to src/components/Switcher/Tabs/DesktopView.tsx
index aa592aaa3..49bba8f05 100644
--- a/src/components/Switcher/Tabs/DesktopView.js
+++ b/src/components/Switcher/Tabs/DesktopView.tsx
@@ -4,10 +4,10 @@
  *
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useRef, useState, useCallback } from 'react'
 import { isEmpty, findIndex } from 'ramda'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { useDevice } from '@/hooks'
 import { SIZE } from '@/constant'
 import { buildLog, isString } from '@/utils'
@@ -23,6 +23,7 @@ const log = buildLog('c:Tabs:index')
 const temItems = [
   {
     title: '帖子',
+    raw: 'posts',
     // icon: `${ICON_CMD}/navi/fire.svg`,
     localIcon: 'settings',
   },
@@ -36,18 +37,33 @@ const temItems = [
  * @param {string} activeKey
  * @returns number
  */
-const getDefaultActiveTabIndex = (items, activeKey) => {
+const getDefaultActiveTabIndex = (
+  items: TTabItem[],
+  activeKey: string,
+): number => {
   if (isEmpty(activeKey)) return 0
   const index = findIndex((item) => {
-    return isString(item)
-      ? activeKey === item
-      : activeKey === (item.raw || item.title)
+    return activeKey === (item.raw || item.title)
   }, items)
 
   return index >= 0 ? index : 0
 }
 
-const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+  slipHeight = '2px',
+}) => {
   const { isMobile } = useDevice()
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
@@ -118,7 +134,7 @@ const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
           slipHeight={slipHeight}
         >
           <RealBar
-            width={`${size === 'default' ? slipWidth : slipWidth - 6}px`}
+            width={`${size === SIZE.MEDIUM ? slipWidth : slipWidth - 6}px`}
           />
         </SlipBar>
       </Nav>
@@ -126,31 +142,4 @@ const Tabs = ({ size, onChange, items, activeKey, slipHeight }) => {
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  slipHeight: T.oneOf(['1px', '2px']),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-  slipHeight: '2px',
-}
-
 export default React.memo(Tabs)
diff --git a/src/components/Switcher/Tabs/DrawerView.js b/src/components/Switcher/Tabs/DrawerView.tsx
similarity index 58%
rename from src/components/Switcher/Tabs/DrawerView.js
rename to src/components/Switcher/Tabs/DrawerView.tsx
index 1769a677a..ba24a4d47 100644
--- a/src/components/Switcher/Tabs/DrawerView.js
+++ b/src/components/Switcher/Tabs/DrawerView.tsx
@@ -4,9 +4,9 @@
  *
  */
 
-import React, { useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useCallback } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { buildLog, isString } from '@/utils'
 import { SIZE } from '@/constant'
 
@@ -23,7 +23,20 @@ const temItems = [
   },
 ]
 
-const Tabs = ({ size, onChange, items, activeKey }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const Tabs: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+}) => {
   const handleItemClick = useCallback(
     (item) => {
       onChange(isString(item) ? item : item.raw || item.title)
@@ -37,7 +50,6 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
         <TabItem
           key={isString(item) ? item : item.raw || item.title}
           active={activeKey === item.raw}
-          size={size}
           onClick={() => handleItemClick(item)}
         >
           {item.title}
@@ -47,29 +59,4 @@ const Tabs = ({ size, onChange, items, activeKey }) => {
   )
 }
 
-Tabs.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-}
-
-Tabs.defaultProps = {
-  items: temItems,
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-}
-
 export default React.memo(Tabs)
diff --git a/src/components/Switcher/Tabs/LocalIcon.js b/src/components/Switcher/Tabs/LocalIcon.js
index 417cba87b..d58df3b3c 100644
--- a/src/components/Switcher/Tabs/LocalIcon.js
+++ b/src/components/Switcher/Tabs/LocalIcon.js
@@ -19,6 +19,12 @@ import {
   TabFavoritesIcon,
 } from '../styles/tabs/local_icon'
 
+// type TProps = {
+//   raw: string
+//   active: boolean
+//   small?: boolean
+// }
+
 const TabIcon = ({ raw, active, small }) => {
   switch (raw) {
     case 'tech':
diff --git a/src/components/Switcher/Tabs/MobileView/ExpandView.js b/src/components/Switcher/Tabs/MobileView/ExpandView.tsx
similarity index 72%
rename from src/components/Switcher/Tabs/MobileView/ExpandView.js
rename to src/components/Switcher/Tabs/MobileView/ExpandView.tsx
index 49a56ee64..0688cb792 100644
--- a/src/components/Switcher/Tabs/MobileView/ExpandView.js
+++ b/src/components/Switcher/Tabs/MobileView/ExpandView.tsx
@@ -4,9 +4,9 @@
  *
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useRef, useState, useCallback } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { ICON } from '@/config'
 import { SIZE } from '@/constant'
 import { useDevice } from '@/hooks'
@@ -23,7 +23,21 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Tabs:index')
 
-const MobileView = ({ size, onChange, items, activeKey, toggleExpand }) => {
+type TProps = {
+  items: TTabItem[]
+  activeKey: string
+  size: TSIZE_SM
+  toggleExpand: () => void
+  onChange: () => void
+}
+
+const MobileView: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items,
+  activeKey = '',
+  toggleExpand,
+}) => {
   const { isMobile } = useDevice()
 
   const [tabWidthList, setTabWidthList] = useState([])
@@ -69,7 +83,7 @@ const MobileView = ({ size, onChange, items, activeKey, toggleExpand }) => {
       <Nav ref={navRef}>
         {items.map((item, index) => (
           <TabItem
-            key={isString(item) ? item : item.raw || item.title}
+            key={item.raw || item.title}
             mobileView={isMobile}
             activeKey={activeKey}
             index={index}
@@ -85,30 +99,4 @@ const MobileView = ({ size, onChange, items, activeKey, toggleExpand }) => {
   )
 }
 
-MobileView.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  toggleExpand: T.func.isRequired,
-}
-
-MobileView.defaultProps = {
-  items: [],
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-}
-
 export default React.memo(MobileView)
diff --git a/src/components/Switcher/Tabs/MobileView/NormalView.js b/src/components/Switcher/Tabs/MobileView/NormalView.tsx
similarity index 79%
rename from src/components/Switcher/Tabs/MobileView/NormalView.js
rename to src/components/Switcher/Tabs/MobileView/NormalView.tsx
index 1a56e0ba6..bb2452684 100644
--- a/src/components/Switcher/Tabs/MobileView/NormalView.js
+++ b/src/components/Switcher/Tabs/MobileView/NormalView.tsx
@@ -4,10 +4,10 @@
  *
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useRef, useState, useCallback } from 'react'
 import { isEmpty, findIndex } from 'ramda'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { ICON } from '@/config'
 import { SIZE } from '@/constant'
 import { useDevice } from '@/hooks'
@@ -27,6 +27,15 @@ import { getSlipMargin } from '../../styles/metric/tabs'
 /* eslint-disable-next-line */
 const log = buildLog('c:Tabs:index')
 
+const temItems = [
+  {
+    title: '帖子',
+    raw: 'posts',
+    // icon: `${ICON_CMD}/navi/fire.svg`,
+    localIcon: 'settings',
+  },
+]
+
 /**
  * get default active key in tabs array
  * if not found, return 0 as first
@@ -35,23 +44,34 @@ const log = buildLog('c:Tabs:index')
  * @param {string} activeKey
  * @returns number
  */
-const getDefaultActiveTabIndex = (items, activeKey) => {
+const getDefaultActiveTabIndex = (
+  items: TTabItem[],
+  activeKey: string,
+): number => {
   if (isEmpty(activeKey)) return 0
   const index = findIndex((item) => {
-    return isString(item)
-      ? activeKey === item
-      : activeKey === (item.raw || item.title)
+    return activeKey === (item.raw || item.title)
   }, items)
 
   return index >= 0 ? index : 0
 }
 
-const MobileView = ({
-  size,
-  onChange,
-  items,
-  activeKey,
-  slipHeight,
+type TProps = {
+  items?: TTabItem[]
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+
+  toggleExpand: () => void
+  onChange: () => void
+}
+
+const MobileView: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+  slipHeight = '2px',
   toggleExpand,
 }) => {
   const { isMobile } = useDevice()
@@ -147,32 +167,4 @@ const MobileView = ({
   )
 }
 
-MobileView.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  slipHeight: T.oneOf(['1px', '2px']),
-  toggleExpand: T.func.isRequired,
-}
-
-MobileView.defaultProps = {
-  items: [],
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-  slipHeight: '2px',
-}
-
 export default React.memo(MobileView)
diff --git a/src/components/Switcher/Tabs/MobileView/index.js b/src/components/Switcher/Tabs/MobileView/index.tsx
similarity index 100%
rename from src/components/Switcher/Tabs/MobileView/index.js
rename to src/components/Switcher/Tabs/MobileView/index.tsx
diff --git a/src/components/Switcher/Tabs/ModelineView.js b/src/components/Switcher/Tabs/ModelineView.tsx
similarity index 77%
rename from src/components/Switcher/Tabs/ModelineView.js
rename to src/components/Switcher/Tabs/ModelineView.tsx
index dfad199dc..7f244d576 100644
--- a/src/components/Switcher/Tabs/ModelineView.js
+++ b/src/components/Switcher/Tabs/ModelineView.tsx
@@ -4,10 +4,10 @@
  *
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useRef, useState, useCallback } from 'react'
 import { isEmpty, findIndex } from 'ramda'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { useDevice } from '@/hooks'
 import { SIZE } from '@/constant'
 import { buildLog, isString } from '@/utils'
@@ -24,6 +24,15 @@ import { getSlipMargin } from '../styles/metric/tabs'
 /* eslint-disable-next-line */
 const log = buildLog('c:Tabs:index')
 
+const temItems = [
+  {
+    title: '帖子',
+    raw: 'posts',
+    // icon: `${ICON_CMD}/navi/fire.svg`,
+    localIcon: 'settings',
+  },
+]
+
 /**
  * get default active key in tabs array
  * if not found, return 0 as first
@@ -32,18 +41,33 @@ const log = buildLog('c:Tabs:index')
  * @param {string} activeKey
  * @returns number
  */
-const getDefaultActiveTabIndex = (items, activeKey) => {
+const getDefaultActiveTabIndex = (
+  items: TTabItem[],
+  activeKey: string,
+): number => {
   if (isEmpty(activeKey)) return 0
   const index = findIndex((item) => {
-    return isString(item)
-      ? activeKey === item
-      : activeKey === (item.raw || item.title)
+    return activeKey === (item.raw || item.title)
   }, items)
 
   return index >= 0 ? index : 0
 }
 
-const ModelineView = ({ size, onChange, items, activeKey, slipHeight }) => {
+type TProps = {
+  items?: TTabItem[]
+  onChange: () => void
+  activeKey?: string
+  size: TSIZE_SM
+  slipHeight: '1px' | '2px'
+}
+
+const ModelineView: FC<TProps> = ({
+  size = SIZE.MEDIUM,
+  onChange = log,
+  items = temItems,
+  activeKey = '',
+  slipHeight = '2px',
+}) => {
   const { isMobile } = useDevice()
 
   const defaultActiveTabIndex = getDefaultActiveTabIndex(items, activeKey)
@@ -122,31 +146,4 @@ const ModelineView = ({ size, onChange, items, activeKey, slipHeight }) => {
   )
 }
 
-ModelineView.propTypes = {
-  items: T.oneOfType([
-    T.arrayOf(T.string),
-    T.arrayOf(
-      T.shape({
-        title: T.string,
-        raw: T.string,
-        alias: T.string,
-        icon: T.oneOfType([T.string, T.node]),
-        localIcon: T.string,
-      }),
-    ),
-  ]),
-  onChange: T.func,
-  activeKey: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-  slipHeight: T.oneOf(['1px', '2px']),
-}
-
-ModelineView.defaultProps = {
-  items: [],
-  onChange: log,
-  activeKey: '',
-  size: SIZE.MEDIUM,
-  slipHeight: '2px',
-}
-
 export default React.memo(ModelineView)
diff --git a/src/components/Switcher/Tabs/TabIcon.js b/src/components/Switcher/Tabs/TabIcon.js
deleted file mode 100644
index 2b98d37c3..000000000
--- a/src/components/Switcher/Tabs/TabIcon.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { useCallback } from 'react'
-import T from 'prop-types'
-
-import LocalIcon from './LocalIcon'
-import { Wrapper, Icon } from '../styles/tabs/tab_icon'
-
-const TabIcon = ({ item: { localIcon, icon }, clickableRef, active }) => {
-  const IconCmp = localIcon ? (
-    <LocalIcon raw={localIcon} active={active} />
-  ) : (
-    <Icon src={icon} active={active} />
-  )
-
-  const handleClick = useCallback(
-    (e) => {
-      e.stopPropagation()
-      clickableRef.current.click()
-    },
-    [clickableRef],
-  )
-
-  return <Wrapper onClick={handleClick}>{IconCmp}</Wrapper>
-}
-
-TabIcon.propTypes = {
-  item: T.shape({
-    localIcon: T.string,
-    icon: T.string,
-  }).isRequired,
-  clickableRef: T.shape({ current: T.instanceOf(T.node) }).isRequired,
-  active: T.bool.isRequired,
-}
-
-TabIcon.defaultProps = {}
-
-export default TabIcon
diff --git a/src/components/Switcher/Tabs/TabIcon.tsx b/src/components/Switcher/Tabs/TabIcon.tsx
new file mode 100644
index 000000000..e3bcaecd3
--- /dev/null
+++ b/src/components/Switcher/Tabs/TabIcon.tsx
@@ -0,0 +1,37 @@
+import React, { FC, useCallback } from 'react'
+
+import type { TTabItem } from '@/spec'
+import LocalIcon from './LocalIcon'
+import { Wrapper, Icon } from '../styles/tabs/tab_icon'
+
+type TProps = {
+  item: TTabItem
+  clickableRef: {
+    current: HTMLElement
+  }
+  active: boolean
+}
+
+const TabIcon: FC<TProps> = ({
+  item: { localIcon, icon },
+  clickableRef,
+  active,
+}) => {
+  const IconCmp = localIcon ? (
+    <LocalIcon raw={localIcon} active={active} small={false} />
+  ) : (
+    <Icon src={icon as string} active={active} />
+  )
+
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation()
+      clickableRef.current.click()
+    },
+    [clickableRef],
+  )
+
+  return <Wrapper onClick={handleClick}>{IconCmp}</Wrapper>
+}
+
+export default TabIcon
diff --git a/src/components/Switcher/Tabs/TabItem.js b/src/components/Switcher/Tabs/TabItem.tsx
similarity index 78%
rename from src/components/Switcher/Tabs/TabItem.js
rename to src/components/Switcher/Tabs/TabItem.tsx
index 6afe7386a..ef0de4b5d 100644
--- a/src/components/Switcher/Tabs/TabItem.js
+++ b/src/components/Switcher/Tabs/TabItem.tsx
@@ -4,11 +4,10 @@
  *
  */
 
-import React, { useEffect, useCallback, useRef } from 'react'
-import T from 'prop-types'
+import React, { FC, useEffect, useCallback, useRef } from 'react'
 
+import type { TSIZE_SM, TTabItem } from '@/spec'
 import { buildLog, isString, Trans } from '@/utils'
-import { SIZE } from '@/constant'
 
 import TabIcon from './TabIcon'
 import {
@@ -21,11 +20,24 @@ import {
 /* eslint-disable-next-line */
 const log = buildLog('c:Tabs:index')
 
-const TabItem = ({
-  mobileView,
-  modelineView,
-  cardView,
-  wrapMode,
+type TProps = {
+  mobileView?: boolean
+  modelineView?: boolean
+  cardView?: boolean
+  wrapMode?: boolean
+  item: TTabItem
+  index: number
+  size: TSIZE_SM
+  activeKey: string
+  setItemWidth?: (index: number, width: number) => void
+  onClick?: (index: number, e) => void
+}
+
+const TabItem: FC<TProps> = ({
+  mobileView = false,
+  modelineView = false,
+  cardView = false,
+  wrapMode = false,
   activeKey,
   item,
   index,
@@ -40,7 +52,7 @@ const TabItem = ({
   // set each tab item width for calc
   useEffect(() => {
     const width = ref.current ? ref.current.offsetWidth : 0
-    setItemWidth(index, width)
+    setItemWidth?.(index, width)
   }, [setItemWidth, index])
 
   const handleWrapperClick = useCallback(() => {
@@ -108,24 +120,4 @@ const TabItem = ({
   )
 }
 
-TabItem.propTypes = {
-  mobileView: T.bool,
-  modelineView: T.bool,
-  cardView: T.bool,
-  wrapMode: T.bool,
-  item: T.any.isRequired,
-  index: T.number.isRequired,
-  setItemWidth: T.func.isRequired,
-  onClick: T.func.isRequired,
-  activeKey: T.string.isRequired,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]).isRequired,
-}
-
-TabItem.defaultProps = {
-  mobileView: false,
-  modelineView: false,
-  cardView: false,
-  wrapMode: false,
-}
-
 export default React.memo(TabItem)
diff --git a/src/components/Switcher/Tabs/index.js b/src/components/Switcher/Tabs/index.tsx
similarity index 88%
rename from src/components/Switcher/Tabs/index.js
rename to src/components/Switcher/Tabs/index.tsx
index e73c3314d..42a9fa5a0 100644
--- a/src/components/Switcher/Tabs/index.js
+++ b/src/components/Switcher/Tabs/index.tsx
@@ -51,12 +51,4 @@ const Tabs = (props) => {
   }
 }
 
-Tabs.propTypes = {
-  view: T.oneOf(['auto', VIEW.COMMUNITY_CARD, VIEW.MODELINE, VIEW.DRAWER]),
-}
-
-Tabs.defaultProps = {
-  view: 'auto',
-}
-
 export default React.memo(Tabs)
diff --git a/src/components/Switcher/styles/tabs/index.ts b/src/components/Switcher/styles/tabs/index.ts
index b9065f32b..24d893df8 100755
--- a/src/components/Switcher/styles/tabs/index.ts
+++ b/src/components/Switcher/styles/tabs/index.ts
@@ -6,7 +6,7 @@ import { css } from '@/utils'
 type TSlipBar = {
   slipHeight: string
   width: string
-  translateX: number
+  translateX: string
 }
 
 export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
diff --git a/src/components/Switcher/styles/tabs/local_icon.ts b/src/components/Switcher/styles/tabs/local_icon.ts
index 094a7b968..f781ada30 100644
--- a/src/components/Switcher/styles/tabs/local_icon.ts
+++ b/src/components/Switcher/styles/tabs/local_icon.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components'
 
+import type { TActive } from '@/spec'
+
 // import Img from '@/Img'
 import { theme, css } from '@/utils'
 import TabPostSVG from '@/SvgIcons/TabPostSVG'
@@ -26,15 +28,18 @@ export const LableWrapper = styled.div`
   ${css.flex('align-center')};
 `
 
-const commonIcon = (comp) =>
-  styled(comp)`
-    fill: ${({ active }) =>
+type TCommonIcon = { active: boolean; small: boolean }
+
+const commonIcon = (comp) => {
+  return styled(comp)<TCommonIcon>`
+    fill: ${({ active }: { active: number }) =>
       active === 1 ? theme('tabs.headerActive') : theme('tabs.header')};
-    width: ${({ small }) => (small ? '13px' : '15px')};
+    width: ${({ small }: { small: boolean }) => (small ? '13px' : '15px')};
     height: ${({ small }) => (small ? '13px' : '15px')};
     margin-right: 5px;
     display: block;
   `
+}
 
 export const TabPostIcon = commonIcon(TabPostSVG)
 export const TabTechIcon = commonIcon(TabTechSVG)
diff --git a/src/components/TabBar/DesktopView/BriefView.js b/src/components/TabBar/DesktopView/BriefView.tsx
similarity index 69%
rename from src/components/TabBar/DesktopView/BriefView.js
rename to src/components/TabBar/DesktopView/BriefView.tsx
index 859f3ec8e..529be9a63 100755
--- a/src/components/TabBar/DesktopView/BriefView.js
+++ b/src/components/TabBar/DesktopView/BriefView.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
+import React, { FC } from 'react'
 
+import type { TTabItem } from '@/spec'
 import { sortByIndex } from '@/utils'
-
 import { Tabs } from '@/components/Switcher'
+
 import { Wrapper } from '../styles/desktop_view/brief_view'
 // import TabIcon from './TabIcon'
 
-const BriefView = ({ source, active, onChange }) => {
+type TProps = {
+  source: TTabItem[]
+  active: string
+  onChange?: () => void
+}
+
+const BriefView: FC<TProps> = ({ source, active, onChange }) => {
   const items = source.map((item) => ({ ...item, localIcon: item.raw }))
 
   return (
diff --git a/src/components/TabBar/DesktopView/NormalView.js b/src/components/TabBar/DesktopView/NormalView.tsx
similarity index 100%
rename from src/components/TabBar/DesktopView/NormalView.js
rename to src/components/TabBar/DesktopView/NormalView.tsx
diff --git a/src/components/TabBar/DesktopView/index.js b/src/components/TabBar/DesktopView/index.js
deleted file mode 100644
index 0c40a787f..000000000
--- a/src/components/TabBar/DesktopView/index.js
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
- * TabBar
- */
-
-import React from 'react'
-import T from 'prop-types'
-
-import { HCN, ANCHOR, THREAD, C11N, SIZE } from '@/constant'
-import { buildLog, sortByIndex } from '@/utils'
-
-import NormalView from './NormalView'
-import BriefView from './BriefView'
-
-import { mapAlias } from '../alias'
-
-/* eslint-disable-next-line */
-const log = buildLog('c:TabBar:index')
-
-const TabBar = ({ source, active, onChange, layout, communityRaw, size }) => {
-  const aliasSource = mapAlias(source, communityRaw)
-  const sortedSource = sortByIndex(aliasSource)
-
-  return (
-    <div id={ANCHOR.GLOBAL_TABBER_ID}>
-      {layout === C11N.BRIEF ? (
-        <BriefView
-          source={sortedSource}
-          active={active}
-          onChange={onChange}
-          size={size}
-        />
-      ) : (
-        <NormalView
-          source={sortedSource}
-          active={active}
-          onChange={onChange}
-          size={size}
-        />
-      )}
-    </div>
-  )
-}
-
-TabBar.propTypes = {
-  onChange: T.func,
-  source: T.arrayOf(
-    T.shape({
-      title: T.string,
-      raw: T.string,
-      alias: T.string,
-      icon: T.oneOfType([T.string, T.node]),
-      localIcon: T.string,
-    }),
-  ).isRequired,
-  active: T.string,
-  layout: T.oneOf([C11N.DIGEST, C11N.DIGEST_ROW, C11N.BRIEF]),
-  // for alias usage
-  communityRaw: T.string,
-  size: T.oneOf([SIZE.MEDIUM, SIZE.SMALL]),
-}
-
-TabBar.defaultProps = {
-  active: THREAD.POST,
-  onChange: log,
-  layout: C11N.DIGEST,
-  communityRaw: HCN,
-  size: SIZE.MEDIUM,
-}
-
-export default React.memo(TabBar)
diff --git a/src/components/TabBar/DesktopView/index.tsx b/src/components/TabBar/DesktopView/index.tsx
new file mode 100644
index 000000000..3f37c2380
--- /dev/null
+++ b/src/components/TabBar/DesktopView/index.tsx
@@ -0,0 +1,56 @@
+/*
+ * TabBar
+ */
+
+import React, { FC } from 'react'
+
+import type { TSIZE_SM } from '@/spec'
+import { HCN, ANCHOR, THREAD, C11N, SIZE } from '@/constant'
+import { buildLog, sortByIndex } from '@/utils'
+
+import type { TTabItem } from '../spec'
+import NormalView from './NormalView'
+import BriefView from './BriefView'
+
+import { mapAlias } from '../alias'
+
+/* eslint-disable-next-line */
+const log = buildLog('c:TabBar:index')
+
+type TProps = {
+  source: TTabItem[]
+  active: string
+  layout: string
+  communityRaw: string
+  size: TSIZE_SM
+  onChange?: () => void
+}
+
+const TabBar: FC<TProps> = ({
+  source,
+  active = THREAD.POST,
+  onChange = log,
+  layout = C11N.DIGEST,
+  communityRaw = HCN,
+  size = SIZE.MEDIUM,
+}) => {
+  const aliasSource = mapAlias(source, communityRaw)
+  const sortedSource = sortByIndex(aliasSource)
+
+  return (
+    <div id={ANCHOR.GLOBAL_TABBER_ID}>
+      {layout === C11N.BRIEF ? (
+        <BriefView source={sortedSource} active={active} onChange={onChange} />
+      ) : (
+        <NormalView
+          source={sortedSource}
+          active={active}
+          onChange={onChange}
+          size={size}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(TabBar)
diff --git a/src/components/TabBar/MobileView.js b/src/components/TabBar/MobileView.tsx
similarity index 100%
rename from src/components/TabBar/MobileView.js
rename to src/components/TabBar/MobileView.tsx
diff --git a/src/components/TabBar/alias.js b/src/components/TabBar/alias.tsx
similarity index 83%
rename from src/components/TabBar/alias.js
rename to src/components/TabBar/alias.tsx
index 02bdb3a06..09c95a6a7 100755
--- a/src/components/TabBar/alias.js
+++ b/src/components/TabBar/alias.tsx
@@ -1,5 +1,7 @@
 import { merge, clone, keys, findIndex, forEach } from 'ramda'
 
+import { TTabItem } from '@/spec'
+
 const alias = {
   home: {
     user: 'C友',
@@ -16,7 +18,10 @@ const alias = {
   python: 'Pythoner',
 }
 
-export const mapAlias = (_source, communityRaw) => {
+export const mapAlias = (
+  _source: TTabItem[],
+  communityRaw: string,
+): TTabItem[] => {
   const communityAlias = alias[communityRaw]
   const source = clone(_source)
 
diff --git a/src/components/TabBar/index.js b/src/components/TabBar/index.tsx
similarity index 82%
rename from src/components/TabBar/index.js
rename to src/components/TabBar/index.tsx
index a564383a6..0834157e6 100755
--- a/src/components/TabBar/index.js
+++ b/src/components/TabBar/index.tsx
@@ -3,7 +3,6 @@
  */
 
 import React from 'react'
-import T from 'prop-types'
 
 import { VIEW } from '@/constant'
 import { useDevice } from '@/hooks'
@@ -34,12 +33,4 @@ const TabBar = (props) => {
   }
 }
 
-TabBar.propTypes = {
-  view: T.oneOf(['auto', VIEW.COMMUNITY_CARD, VIEW.MODELINE]),
-}
-
-TabBar.defaultProps = {
-  view: 'auto',
-}
-
 export default React.memo(TabBar)
diff --git a/src/components/TabBar/spec.ts b/src/components/TabBar/spec.ts
new file mode 100644
index 000000000..795e54f2b
--- /dev/null
+++ b/src/components/TabBar/spec.ts
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+export type TTabItem = {
+  title: string
+  raw: string
+  alias?: string
+  icon?: string | ReactNode
+  localIcon?: string
+}
diff --git a/src/containers/content/UserContent/Sidebar/CommunityEditorInfo.js b/src/containers/content/UserContent/Sidebar/CommunityEditorInfo.tsx
similarity index 78%
rename from src/containers/content/UserContent/Sidebar/CommunityEditorInfo.js
rename to src/containers/content/UserContent/Sidebar/CommunityEditorInfo.tsx
index 292d84754..8dd01c6b3 100755
--- a/src/containers/content/UserContent/Sidebar/CommunityEditorInfo.js
+++ b/src/containers/content/UserContent/Sidebar/CommunityEditorInfo.tsx
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { FC } from 'react'
 
+import type { TUser } from '@/spec'
 import CommunityList from '@/components/CommunityList'
 
 import {
@@ -8,7 +9,11 @@ import {
   Text,
 } from '../styles/sidebar/community_editor_info'
 
-const CommunityEditorInfo = ({ user: { editableCommunities } }) => {
+type TProps = {
+  user: TUser
+}
+
+const CommunityEditorInfo: FC<TProps> = ({ user: { editableCommunities } }) => {
   if (!editableCommunities || editableCommunities.totalCount === 0) return null
 
   if (editableCommunities.totalCount > 10) {
diff --git a/src/containers/content/UserContent/Sidebar/index.js b/src/containers/content/UserContent/Sidebar/index.tsx
similarity index 56%
rename from src/containers/content/UserContent/Sidebar/index.js
rename to src/containers/content/UserContent/Sidebar/index.tsx
index eb962faa1..4f1414c57 100644
--- a/src/containers/content/UserContent/Sidebar/index.js
+++ b/src/containers/content/UserContent/Sidebar/index.tsx
@@ -1,10 +1,16 @@
-import React from 'react'
+import React, { FC } from 'react'
 
+import type { TUser } from '@/spec'
 import { VIEW } from '@/constant'
 import UserBrief from '@/components/UserBrief'
 import { Wrapper } from '../styles/sidebar'
 
-const Sidebar = ({ viewingUser }) => {
+type TProps = {
+  viewingUser: TUser
+  isSelfViewing?: boolean
+}
+
+const Sidebar: FC<TProps> = ({ viewingUser, isSelfViewing = false }) => {
   return (
     <Wrapper>
       <UserBrief user={viewingUser} view={VIEW.DESKTOP} />
diff --git a/src/containers/content/UserContent/index.js b/src/containers/content/UserContent/index.tsx
similarity index 93%
rename from src/containers/content/UserContent/index.js
rename to src/containers/content/UserContent/index.tsx
index 46100cf0e..39e439771 100755
--- a/src/containers/content/UserContent/index.js
+++ b/src/containers/content/UserContent/index.tsx
@@ -4,7 +4,7 @@
  *
  */
 
-import React from 'react'
+import React, { FC } from 'react'
 
 import { USER_THREAD } from '@/constant'
 import { pluggedIn, buildLog } from '@/utils'
@@ -19,6 +19,7 @@ import UserFavorited from '@/containers/user/UserFavorited'
 
 import TabBar from '@/components/TabBar'
 
+import type { TStore } from './store'
 import Sidebar from './Sidebar'
 // import DigestBoard from './DigestBoard'
 
@@ -96,7 +97,12 @@ const TabberContent = ({ active }) => {
   }
 }
 
-const UserContentContainer = ({ userContent: store, metric }) => {
+type TProps = {
+  userContent: TStore
+  metric: string
+}
+
+const UserContentContainer: FC<TProps> = ({ userContent: store, metric }) => {
   useInit(store)
 
   const {
diff --git a/src/containers/content/UserContent/logic.js b/src/containers/content/UserContent/logic.ts
similarity index 83%
rename from src/containers/content/UserContent/logic.js
rename to src/containers/content/UserContent/logic.ts
index 28fc65dbc..54785a417 100755
--- a/src/containers/content/UserContent/logic.js
+++ b/src/containers/content/UserContent/logic.ts
@@ -1,8 +1,11 @@
 import { useEffect } from 'react'
 
+import type { TID, TThread, TUser } from '@/spec'
 import { TYPE, EVENT, ERR } from '@/constant'
 import { asyncSuit, buildLog, send, errRescue } from '@/utils'
 
+import type { TStore } from './store'
+
 import S from './schema'
 
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
@@ -14,7 +17,7 @@ let store = null
 /* eslint-disable-next-line */
 const log = buildLog('L:UserContent')
 
-export const followUser = (userId) => {
+export const followUser = (userId: TID): void => {
   if (!store.isLogin) return store.authWarning()
 
   log('followUser: ', userId)
@@ -22,7 +25,7 @@ export const followUser = (userId) => {
   sr71$.mutate(S.follow, { userId })
 }
 
-export const undoFollowUser = (userId) => {
+export const undoFollowUser = (userId: TID): void => {
   if (!store.isLogin) return store.authWarning()
 
   log('undoFollowUser: ', userId)
@@ -30,13 +33,13 @@ export const undoFollowUser = (userId) => {
   sr71$.mutate(S.undoFollow, { userId })
 }
 
-const getUserFollowStates = () => {
+const getUserFollowStates = (): void => {
   const { login } = store.viewingUser
 
   sr71$.query(S.user, { login, userHasLogin: store.isLogin })
 }
 
-export const showFollowings = (user) => {
+export const showFollowings = (user: TUser): void => {
   const type = TYPE.USER_LISTER_FOLLOWINGS
   const data = {
     id: user.id,
@@ -46,7 +49,7 @@ export const showFollowings = (user) => {
   send(EVENT.USER_LISTER_OPEN, { type, data })
 }
 
-export const showFollowers = (user) => {
+export const showFollowers = (user: TUser): void => {
   const type = TYPE.USER_LISTER_FOLLOWERS
   const data = {
     id: user.id,
@@ -56,7 +59,7 @@ export const showFollowers = (user) => {
   send(EVENT.USER_LISTER_OPEN, { type, data })
 }
 
-export const tabOnChange = (activeThread) => {
+export const tabOnChange = (activeThread: TThread): void => {
   store.mark({ activeThread })
   store.markRoute({ tab: activeThread })
 }
@@ -109,14 +112,14 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store) => {
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
     // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 
     return () => {
-      if (!sub$) return false
+      if (!sub$) return
       sub$.unsubscribe()
     }
   }, [_store])
diff --git a/src/containers/content/UserContent/store.js b/src/containers/content/UserContent/store.js
deleted file mode 100755
index c8cd07478..000000000
--- a/src/containers/content/UserContent/store.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * UserContent store
- *
- */
-
-import { types as T, getParent } from 'mobx-state-tree'
-import { values } from 'ramda'
-
-import { USER_THREAD } from '@/constant'
-import { markStates, buildLog, stripMobx } from '@/utils'
-
-/* eslint-disable-next-line */
-const log = buildLog('S:UserContent')
-
-const UserContent = T.model('UserContent', {
-  activeThread: T.optional(
-    T.enumeration('activeThread', values(USER_THREAD)),
-    USER_THREAD.PROFILE,
-  ),
-  following: T.optional(T.boolean, false),
-})
-  .views((self) => ({
-    get root() {
-      return getParent(self)
-    },
-    get isLogin() {
-      return self.root.account.isLogin
-    },
-    get accountInfo() {
-      return self.root.account.accountInfo
-    },
-    get viewingUser() {
-      return stripMobx(self.root.viewing.user)
-    },
-    get isSelfViewing() {
-      return self.root.viewing.isSelfViewing
-    },
-  }))
-  .actions((self) => ({
-    authWarning(options) {
-      self.root.authWarning(options)
-    },
-    updateViewingUser(user) {
-      self.root.viewing.updateViewingUser(user)
-    },
-    mark(sobj) {
-      markStates(sobj, self)
-    },
-    markRoute(query) {
-      self.root.markRoute(query)
-    },
-  }))
-
-export default UserContent
diff --git a/src/containers/content/UserContent/store.ts b/src/containers/content/UserContent/store.ts
new file mode 100755
index 000000000..4e8e1331c
--- /dev/null
+++ b/src/containers/content/UserContent/store.ts
@@ -0,0 +1,60 @@
+/*
+ * UserContent store
+ *
+ */
+
+import { types as T, getParent, Instance } from 'mobx-state-tree'
+import { values } from 'ramda'
+
+import type { TRootStore, TAccount, TUser } from '@/spec'
+import { USER_THREAD } from '@/constant'
+import { markStates, buildLog, stripMobx } from '@/utils'
+
+/* eslint-disable-next-line */
+const log = buildLog('S:UserContent')
+
+const UserContent = T.model('UserContent', {
+  activeThread: T.optional(
+    T.enumeration('activeThread', values(USER_THREAD)),
+    USER_THREAD.PROFILE,
+  ),
+  following: T.optional(T.boolean, false),
+})
+  .views((self) => ({
+    get isLogin(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.account.isLogin
+    },
+    get accountInfo(): TAccount {
+      const root = getParent(self) as TRootStore
+      return root.account.accountInfo
+    },
+    get viewingUser(): TUser {
+      const root = getParent(self) as TRootStore
+      return stripMobx(root.viewing.user)
+    },
+    get isSelfViewing(): boolean {
+      const root = getParent(self) as TRootStore
+      return root.viewing.isSelfViewing
+    },
+  }))
+  .actions((self) => ({
+    authWarning(options) {
+      const root = getParent(self) as TRootStore
+      root.authWarning(options)
+    },
+    updateViewingUser(user) {
+      const root = getParent(self) as TRootStore
+      root.viewing.updateViewingUser(user)
+    },
+    markRoute(query): void {
+      const root = getParent(self) as TRootStore
+      root.markRoute(query)
+    },
+    mark(sobj: Record<string, unknown>): void {
+      markStates(sobj, self)
+    },
+  }))
+
+export type TStore = Instance<typeof UserContent>
+export default UserContent
diff --git a/src/containers/unit/Footer/styles/index.ts b/src/containers/unit/Footer/styles/index.ts
index 7fd67c464..9d2738d89 100755
--- a/src/containers/unit/Footer/styles/index.ts
+++ b/src/containers/unit/Footer/styles/index.ts
@@ -8,7 +8,7 @@ type TWrapper = TTestable & { metric: string; layout: string }
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TWrapper>`
-  ${css.flex()};
+  ${css.flex('justify-center')};
   margin-top: ${({ layout }) => (layout === C11N.DIGEST_ROW ? '50px' : '80px')};
   ${({ metric }) => css.fitPageWidth(metric)};
 `
diff --git a/src/schemas/pages/job.ts b/src/schemas/pages/job.ts
index 3d93d4045..7e5d35d42 100755
--- a/src/schemas/pages/job.ts
+++ b/src/schemas/pages/job.ts
@@ -42,7 +42,7 @@ export const pagedJobs = `
     pagedJobs(filter: $filter) {
       entries {
         ${F.job}
-        pin
+        isPinned
         author {
           ${F.author}
         }
diff --git a/src/schemas/pages/post.ts b/src/schemas/pages/post.ts
index 4aed5936c..b02e25672 100755
--- a/src/schemas/pages/post.ts
+++ b/src/schemas/pages/post.ts
@@ -48,7 +48,7 @@ export const pagedPosts = `
     pagedPosts(filter: $filter) {
       entries {
         ${F.post}
-        pin
+        isPinned
         digest
         linkAddr
         linkIcon
diff --git a/src/schemas/pages/repo.ts b/src/schemas/pages/repo.ts
index 80cf1e0d4..a851fb7da 100755
--- a/src/schemas/pages/repo.ts
+++ b/src/schemas/pages/repo.ts
@@ -41,7 +41,7 @@ export const pagedRepos = `
     pagedRepos(filter: $filter) {
       entries {
         ${F.repo}
-        pin
+        isPinned
         views
         releaseTag
         author {
diff --git a/src/spec/account.ts b/src/spec/account.ts
index 0006da1d8..b58834872 100644
--- a/src/spec/account.ts
+++ b/src/spec/account.ts
@@ -1,3 +1,5 @@
+import type { TPagedCommunities } from './community'
+
 export type TUser = {
   id?: string
   login?: string
@@ -6,7 +8,9 @@ export type TUser = {
   avatar?: string
   // TODO: figure it out
   extraId?: string
+  editableCommunities?: TPagedCommunities
 }
+
 export type TAccount = TUser & {
   customization?: {
     theme?: string
diff --git a/src/spec/article.ts b/src/spec/article.ts
index a75aca0a9..bf4287a1b 100644
--- a/src/spec/article.ts
+++ b/src/spec/article.ts
@@ -6,6 +6,7 @@ export type TArticle = {
   title?: string
   body?: string
   views?: number
+  isPinned?: boolean
   author?: {
     id: string
     login: string
diff --git a/src/spec/community.ts b/src/spec/community.ts
new file mode 100644
index 000000000..89ac82aa3
--- /dev/null
+++ b/src/spec/community.ts
@@ -0,0 +1,24 @@
+export type TCommunity = {
+  id?: string
+  title: string
+  logo?: string
+  raw: string
+  subscribersCount?: number
+  desc?: string
+  threads?: {
+    title: string
+    raw: string
+  }[]
+}
+
+export type TPagedCommunities = {
+  entries: TCommunity[]
+  totalCount?: number
+}
+
+export type TTag = {
+  id: number
+  title: string
+  color: string
+  group?: string
+}
diff --git a/src/spec/index.ts b/src/spec/index.ts
index 293496213..a70992115 100644
--- a/src/spec/index.ts
+++ b/src/spec/index.ts
@@ -1,5 +1,6 @@
 import type { TRootStore as RootStoreType } from '@/stores/RootStore'
 import type { TArticle } from './article'
+import type { TCommunity } from './community'
 
 export type {
   TSIZE,
@@ -13,11 +14,12 @@ export type {
   TSIZE_SM,
 } from './size'
 export type { TButton, TFiltersMenuItems } from './comp'
-
 export type { TTheme, TThemeMap, TThemeName } from './theme'
 export type { TAccount, TUser, TMembership } from './account'
+export type { TCommunity, TPagedCommunities, TTag } from './community'
 
 export type {
+  TID,
   TTestable,
   TActive,
   TSpace,
@@ -32,6 +34,7 @@ export type {
   TTooltipPlacement,
   TReportType,
   TAttInfo,
+  TTabItem,
 } from './utils'
 
 export type { TGQLError } from './graphql'
@@ -65,30 +68,6 @@ export type TRoute = {
 
 export type TRootStore = RootStoreType
 
-export type TCommunity = {
-  id: string
-  title: string
-  logo?: string
-  raw: string
-  subscribersCount?: number
-  desc?: string
-  threads?: {
-    title: string
-    raw: string
-  }[]
-}
-
-export type TPagedCommunities = {
-  entries: TCommunity[]
-}
-
-export type TTag = {
-  id: number
-  title: string
-  color: string
-  group?: string
-}
-
 export type TViewing = TCommunity | TArticle
 
 export type TThread = string
diff --git a/src/spec/utils.ts b/src/spec/utils.ts
index 22adec087..5e4410f7a 100644
--- a/src/spec/utils.ts
+++ b/src/spec/utils.ts
@@ -1,6 +1,9 @@
+import { ReactNode } from 'react'
 // c# like
 export type Nullable<T> = T | null
 
+export type TID = string
+
 export type TTestable = {
   testid: string
 }
@@ -77,3 +80,12 @@ export type TAttInfo = {
   title: string
   // ...
 }
+
+export type TTabItem = {
+  id?: string
+  title: string
+  raw: string
+  alias?: string
+  icon?: string | ReactNode
+  localIcon?: string
+}
diff --git a/src/stores/SharedModel/Job.ts b/src/stores/SharedModel/Job.ts
index a59faab1b..518e16084 100755
--- a/src/stores/SharedModel/Job.ts
+++ b/src/stores/SharedModel/Job.ts
@@ -30,7 +30,7 @@ export const Job = T.model('Job', {
   commentsParticipatorsCount: T.optional(T.number, 0),
   commentsParticipators: T.optional(T.array(User), []),
   views: T.optional(T.number, 0),
-  pin: T.maybeNull(T.boolean),
+  isPinned: T.maybeNull(T.boolean),
 
   length: T.optional(T.number, 0),
   favoritedCount: T.optional(T.number, 0),
diff --git a/src/stores/SharedModel/Post.ts b/src/stores/SharedModel/Post.ts
index d79d991b7..f59c4fdfe 100755
--- a/src/stores/SharedModel/Post.ts
+++ b/src/stores/SharedModel/Post.ts
@@ -27,7 +27,7 @@ export const Post = T.model('Post', {
   commentsParticipatorsCount: T.optional(T.number, 0),
   commentsParticipators: T.optional(T.array(User), []),
   views: T.optional(T.number, 0),
-  pin: T.maybeNull(T.boolean),
+  isPinned: T.maybeNull(T.boolean),
   length: T.optional(T.number, 0),
   favoritedCount: T.optional(T.number, 0),
   starredCount: T.optional(T.number, 0),
diff --git a/src/stores/SharedModel/Repo.ts b/src/stores/SharedModel/Repo.ts
index f57e6ca07..f95a6a227 100755
--- a/src/stores/SharedModel/Repo.ts
+++ b/src/stores/SharedModel/Repo.ts
@@ -41,7 +41,7 @@ export const Repo = T.model('Reop', {
 
   author: T.maybeNull(User),
   views: T.optional(T.number, 0),
-  pin: T.maybeNull(T.boolean),
+  isPinned: T.maybeNull(T.boolean),
 
   favoritedCount: T.optional(T.number, 0),
   viewerHasFavorited: T.optional(T.boolean, false),
diff --git a/utils/helper.ts b/utils/helper.ts
index 72534faeb..429ae801b 100755
--- a/utils/helper.ts
+++ b/utils/helper.ts
@@ -12,7 +12,7 @@ import { isString } from './validator'
 type TSORTABLE_ITEMS = {
   color?: string
   index?: number
-  id: string
+  id?: string
   title: string
   raw: string
   logo?: string