refactor(user-lister): redesign & user lister concept improve

package.json

@@ -64,7 +64,8 @@
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-pwa": "^5.6.0",
-    "overlayscrollbars": "^2.1.0",
+    "overlayscrollbars": "^2.4.5",
+    "overlayscrollbars-react": "^0.5.3",
     "promise-timeout": "^1.3.0",
     "prop-types": "^15.5.10",
     "qrcode.react": "^3.1.0",

src/containers/Mushroom/logic.ts

@@ -34,7 +34,12 @@ let sub$ = null
 const { SR71, $solver, asyncRes, asyncErr } = asyncSuit
 const sr71$ = new SR71({
   // @ts-ignore
-  receive: [EVENT.UPVOTE_ARTICLE, EVENT.UPDATE_VIEWING_ARTICLE, EVENT.REFRESH_ARTICLES],
+  receive: [
+    EVENT.UPVOTE_ARTICLE,
+    EVENT.UPDATE_VIEWING_ARTICLE,
+    EVENT.REFRESH_ARTICLES,
+    EVENT.LIST_USER_MODAL,
+  ],
 })
 
 // custromScroll's scroll direction change
@@ -168,6 +173,13 @@ const DataSolver = [
       store.syncArticle(article)
     },
   },
+  {
+    match: asyncRes(EVENT.LIST_USER_MODAL),
+    action: () => {
+      store.mark({ showUserListModal: true })
+    },
+  },
+
   {
     match: asyncRes(EVENT.UPVOTE_ARTICLE),
     action: (_data) => {

src/containers/Mushroom/store.ts

@@ -22,6 +22,8 @@ import { T, getParent, markStates, Instance, toJS, useMobxContext } from '@/mobx
 const MushroomStore = T.model('MushroomStore', {
   online: T.opt(T.bool, true),
   isMobile: T.opt(T.bool, false),
+
+  showUserListModal: T.opt(T.bool, false),
   // follow the mac convention
   bodyScrollDirection: T.opt(T.enum(['up', 'down']), 'up'),
   // activeState;
@@ -110,6 +112,9 @@ const MushroomStore = T.model('MushroomStore', {
       const root = getParent(self) as TRootStore
       return root.dashboardThread.clearLocalSettings()
     },
+    closeUserListModal(): void {
+      self.showUserListModal = false
+    },
     authWarning(options): void {
       const root = getParent(self) as TRootStore
       root.authWarning(options)

src/containers/dynamic/index.tsx

@@ -7,6 +7,4 @@ export const Comments = dynamic(() => import('../unit/Comments'), {
   ssr: false,
 })
 
-export const Cashier = dynamic(() => import('../tool/Cashier'), {
-  ssr: false,
-})
+export const holder = 1

src/containers/editor/TagSettingEditor/index.tsx

@@ -42,18 +42,17 @@ import { observer } from 'mobx-react-lite'
 // const log = buildLog('C:TagSettingEditor')
 
 type TProps = {
-  testid: string
   mode?: TChangeMode
 }
 
-const TagSettingEditor: FC<TProps> = ({ testid, mode = CHANGE_MODE.UPDATE }) => {
+const TagSettingEditor: FC<TProps> = ({ mode = CHANGE_MODE.UPDATE }) => {
   const store = useStore()
   useInit(store, mode)
 
   const { editingTagData: editingTag, curCategory, categoryOptions, processing } = store
 
   return (
-    <Wrapper $testid={testid}>
+    <Wrapper $testid="tag-setting-editor">
       <CustomScroller
         instanceKey={DRAWER_SCROLLER}
         direction="vertical"

src/containers/editor/WallpaperEditor/index.tsx

@@ -6,7 +6,6 @@
 import { FC } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { DRAWER_SCROLLER } from '@/constant/dom'
 import VIEW from '@/constant/view'
 
 import { DesktopOnly, MobileOnly } from '@/widgets/Common'
@@ -42,14 +41,7 @@ const WallpaperEditor: FC = () => {
         </Content>
       </MobileOnly>
       <DesktopOnly>
-        <CustomScroller
-          instanceKey={DRAWER_SCROLLER}
-          direction="vertical"
-          height="calc(100vh - 226px)"
-          barSize="small"
-          showShadow={false}
-          autoHide={false}
-        >
+        <CustomScroller barSize="small" showShadow={false} autoHide={false}>
           <Content>
             {tab === TAB.BUILDIN && <BuildIn wallpaperData={wallpaperData} />}
             {tab === TAB.UPLOAD && <UploadPic />}

src/containers/thread/DashboardThread/SideMenu/index.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
 import { keys } from 'ramda'
 
-import type { TCommunity, TDashboardPath } from '@/spec'
+import type { TDashboardPath } from '@/spec'
 import Sticky from '@/widgets/Sticky'
 
 import { MENU } from '../constant'

src/containers/thread/DashboardThread/styles/side_menu/group.ts

@@ -66,7 +66,7 @@ export const Item = styled(Link)<TItem>`
   display: block;
   color: ${({ $active, $color }) =>
     $active ? rainbow($color, 'dashboard.menuTitle') : theme('dashboard.menuTitle')};
-  background: ${({ $active }) => ($active ? theme('activeLinear') : 'transparent')};
+  background: ${({ $active }) => ($active ? theme('hoverBg') : 'transparent')};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
 
   width: 160px;
@@ -81,7 +81,7 @@ export const Item = styled(Link)<TItem>`
   &:hover {
     cursor: pointer;
     color: ${({ $color }) => rainbow($color, 'dashboard.menuTitle')};
-    background: ${theme('activeLinear')};
+    background: ${theme('hoverBg')};
   }
 
   &:before {

src/containers/thread/PostThread/ThreadSidebar/index.tsx

@@ -15,7 +15,7 @@ import useViewingCommunity from '@/hooks/useViewingCommunity'
 import useActiveTag from '@/hooks/useActiveTag'
 
 import { buildLog } from '@/logger'
-import { refreshArticles, callGEditor, callSyncSelector } from '@/signal'
+import { refreshArticles, callGEditor, callSyncSelector, listUsers } from '@/signal'
 import { toJS } from '@/mobx'
 import { mockUsers } from '@/mock'
 
@@ -77,7 +77,7 @@ const ThreadSidebar: FC = () => {
                 fallback={<ImgFallback size={24} user={user} />}
               />
             ))}
-            <MoreNum>+2</MoreNum>
+            <MoreNum onClick={() => listUsers('drawer')}>+2</MoreNum>
           </CommunityJoinersWrapper>
         </Fragment>
 

src/containers/thread/PostThread/index.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, useEffect, useRef } from 'react'
+import { FC, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import type { TResState } from '@/spec'
@@ -18,41 +18,23 @@ import { THREAD } from '@/constant/thread'
 
 import PagedPosts from '@/widgets/PagedPosts'
 import TagNote from '@/widgets/TagNote'
-import ViewportTracker from '@/widgets/ViewportTracker'
 import ArticlesFilter from '@/widgets/ArticlesFilter'
 // import LavaLampLoading from '@/widgets/Loading/LavaLampLoading'
 
 import ThreadSidebar from './ThreadSidebar'
 
 import { Wrapper, MainWrapper, SidebarWrapper, FilterWrapper } from './styles'
-import { inAnchor, outAnchor, onFilterSelect } from './logic'
 
 /* eslint-disable-next-line */
 const log = buildLog('C:PostThread')
 
-const isInViewport = (element) => {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
 const PostThread: FC = () => {
   const bannerLayout = useBannerLayout()
   const { resState } = usePagedPosts()
 
   const postLayout = usePostLayout()
   const trackerRef = useRef(null)
 
-  useEffect(() => {
-    if (trackerRef.current) {
-      isInViewport(trackerRef.current) ? inAnchor() : outAnchor()
-    }
-  }, [trackerRef])
-
   // if (store.curThread !== THREAD.POST) return <LavaLampLoading top={20} />
 
   const isMobile = false
@@ -64,8 +46,6 @@ const PostThread: FC = () => {
   return (
     <Wrapper>
       <LayoutWrapper $thread={THREAD.POST} $postLayout={postLayout}>
-        <ViewportTracker onEnter={inAnchor} onLeave={outAnchor} />
-
         {showFilters && (
           <FilterWrapper ref={trackerRef}>
             <ArticlesFilter isMobile={isMobile} resState={resState as TResState} mode="default" />

src/containers/thread/PostThread/styles/thread_sidebar/community_brief.ts

@@ -13,20 +13,20 @@ export const Wrapper = styled.div<TActive>`
 `
 export const Brief = styled.div`
   margin-bottom: 10px;
-  margin-left: 14px;
+  margin-left: 12px;
 `
 export const Logo = styled(Img)`
-  ${css.size(40)};
-  margin-top: -5px;
+  ${css.size(32)};
+  margin-top: -6px;
 `
 export const Title = styled.div`
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: ${theme('article.title')};
 `
 export const InfoBar = styled.div`
   ${css.row('align-center')};
-  margin-top: 2px;
+  margin-top: 1px;
 `
 export const Label = styled.div`
   font-size: 13px;

src/containers/thread/PostThread/styles/thread_sidebar/index.ts

@@ -36,12 +36,13 @@ export const MoreNum = styled.div`
   color: ${theme('article.digest')};
   font-size: 15px;
   margin-top: 1px;
-  margin-left: 2px;
+  margin-left: 4px;
   letter-spacing: 1px;
   opacity: 0.8;
 
   &:hover {
     color: ${theme('article.title')};
+    background: ${theme('hoverBg')};
     opacity: 1;
     cursor: pointer;
   }