refactor(articles): move articles pages to app dir

src/app/[community]/(articles)/about/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import AboutThread from '@/containers/thread/AboutThread'
+
+const CommunityAboutPage = () => {
+  return <AboutThread />
+}
+
+export default CommunityAboutPage

src/app/[community]/(articles)/changelog/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import ChangelogThread from '@/containers/thread/ChangelogThread'
+
+const CommunityChangelogPage = () => {
+  return <ChangelogThread />
+}
+
+export default CommunityChangelogPage

src/app/[community]/(articles)/doc/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import DocThread from '@/containers//thread/DocThread'
+
+const CommunityDocPage = () => {
+  return <DocThread />
+}
+
+export default CommunityDocPage

src/app/[community]/(articles)/kanban/page.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import KanbanThread from '@/containers//thread/KanbanThread'
+
+const CommunityKanbanPage = () => {
+  return <KanbanThread />
+}
+
+export default CommunityKanbanPage

src/app/[community]/(articles)/layout.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { observer } from 'mobx-react-lite'
+
+import { BANNER_LAYOUT } from '@/constant/layout'
+
+import useMetric from '@/hooks/useMetric'
+import useBannerLayout from '@/hooks/useBannerLayout'
+
+import CommunityDigest from '@/widgets/CommunityDigest'
+
+import { Wrapper, SidebarWrapper, InnerWrapper, ContentWrapper } from './styles'
+
+const Layout = ({ children }) => {
+  const metric = useMetric()
+
+  const bannerLayout = useBannerLayout()
+  const isSidebarLayout = bannerLayout === BANNER_LAYOUT.SIDEBAR
+  const LayoutWrapper = isSidebarLayout ? SidebarWrapper : Wrapper
+
+  return (
+    <LayoutWrapper $testid="post-thread-content" metric={metric}>
+      <CommunityDigest />
+
+      <InnerWrapper metric={metric} $bannerLayout={bannerLayout}>
+        <ContentWrapper>{children}</ContentWrapper>
+      </InnerWrapper>
+    </LayoutWrapper>
+  )
+}
+
+export default observer(Layout)

src/app/[community]/(articles)/post/[id]/layout.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import useMetric from '@/hooks/useMetric'
+
+import { Wrapper, InnerWrapper } from '@/widgets/Article/styles/post'
+
+const Layout = ({ children }) => {
+  const metric = useMetric()
+
+  return (
+    <Wrapper metric={metric}>
+      {/* <FixedHeader show={!inViewport} article={viewingArticle} metric={metric} /> */}
+      <InnerWrapper metric={metric}>{children}</InnerWrapper>
+    </Wrapper>
+  )
+}
+
+export default Layout

src/app/[community]/(articles)/post/[id]/loading.tsx

@@ -0,0 +1,9 @@
+const Loading = () => {
+  return (
+    <div>
+      <h2>post id loading</h2>
+    </div>
+  )
+}
+
+export default Loading

src/app/[community]/(articles)/post/loading.tsx

@@ -0,0 +1,9 @@
+const Loading = () => {
+  return (
+    <div>
+      <h2>post loading</h2>
+    </div>
+  )
+}
+
+export default Loading

src/app/[community]/(articles)/post/page.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import useIsSidebarLayout from '@/hooks/useIsSidebarLayout'
+
+import PostThread from '@/containers//thread/PostThread'
+import { Br } from '@/widgets/Common'
+
+const CommunityPostPage = () => {
+  const isSidebarLayout = useIsSidebarLayout()
+
+  return (
+    <>
+      {isSidebarLayout && <Br top={20} />}
+      <PostThread />
+    </>
+  )
+}
+
+export default CommunityPostPage

src/containers/content/CommunityContent/styles/index.ts → src/app/[community]/(articles)/styles/index.tsx

@@ -5,7 +5,7 @@ import { BANNER_LAYOUT } from '@/constant/layout'
 
 import css, { theme } from '@/css'
 
-export const BaseWrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
+const BaseWrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
   'data-test-id': $testid,
 }))<TTestable>`
   min-height: 70vh;
@@ -32,10 +32,6 @@ export const BaseInnerWrapper = styled.div<{ metric?: TMetric }>`
     padding: 0;
   `};
 `
-export const BaseContentWrapper = styled.div`
-  ${css.column()};
-  width: 100%;
-`
 export const Wrapper = styled(BaseWrapper)<{ metric?: TMetric }>`
   ${css.column('justify-start', 'align-center')};
 
@@ -67,4 +63,7 @@ export const InnerWrapper = styled(BaseInnerWrapper)<{ $bannerLayout?: TBannerLa
     margin-left: 0;
   `};
 `
-export const ContentWrapper = styled(BaseContentWrapper)``
+export const ContentWrapper = styled.div`
+  ${css.column()};
+  width: 100%;
+`

src/app/[community]/dashboard/layout.tsx

@@ -1,28 +1,26 @@
 'use client'
 
 import { observer } from 'mobx-react-lite'
+
 import useDashboardSettings from '@/hooks/useDashboardSettings'
+import useMetric from '@/hooks/useMetric'
 
 import CommunityDigest from '@/widgets/CommunityDigest'
 
-import {
-  Wrapper as WrapperRoot,
-  InnerWrapper,
-  ContentWrapper,
-  // MobileCardsWrapper,
-} from '@/containers/content/CommunityContent/styles/dashboard_content'
+import { Wrapper as WrapperRoot, InnerWrapper, ContentWrapper } from './styles'
 
 import { Wrapper, MainWrapper } from '@/containers/thread/DashboardThread/styles'
 import SideMenu from '@/containers/thread/DashboardThread/SideMenu'
 
 const Layout = ({ children }) => {
   const { curTab, touched } = useDashboardSettings()
+  const metric = useMetric()
 
   return (
     <WrapperRoot $testid="dashboard-thread-content">
       <CommunityDigest />
 
-      <InnerWrapper metric="COMMUNITY">
+      <InnerWrapper metric={metric}>
         <ContentWrapper>
           <Wrapper $testid="dashboard-thread" metric="COMMUNITY">
             <SideMenu curTab={curTab} touched={touched} />

src/app/[community]/dashboard/styles/index.ts

@@ -0,0 +1,41 @@
+import styled from 'styled-components'
+
+import type { TMetric, TTestable } from '@/spec'
+import css from '@/css'
+
+export const BaseWrapper = styled.div.attrs<TTestable>(({ $testid }) => ({
+  'data-test-id': $testid,
+}))<TTestable>`
+  min-height: 70vh;
+  width: 100%;
+
+  ${css.media.tablet`
+    width: 100%;
+    margin: 0;
+    padding: .6em;
+    padding-top: 0;
+    padding-right: 0;
+  `};
+`
+
+export const Wrapper = styled(BaseWrapper)<{ metric?: TMetric }>`
+  ${css.column('justify-start', 'align-center')};
+
+  ${css.media.mobile`
+    padding-left: 0;
+  `};
+`
+
+export const InnerWrapper = styled.div<{ metric: TMetric }>`
+  ${({ metric }) => css.fitContentWidth(metric)};
+
+  width: 100%;
+  margin-top: 15px;
+  padding-top: 0;
+  ${css.column('align-center')};
+`
+
+export const ContentWrapper = styled.div`
+  ${css.column()};
+  width: 100%;
+`

src/app/[community]/page.tsx

@@ -1,23 +1,19 @@
 'use client'
 
-import Link from 'next/link'
+import useIsSidebarLayout from '@/hooks/useIsSidebarLayout'
 
-import PostContent from '@/containers/content/CommunityContent/PostContent'
+import PostThread from '@/containers//thread/PostThread'
+import { Br } from '@/widgets/Common'
 
-const CommunityPage = () => {
-  // const rootStore = useRootStore()
-
-  // console.log('## in community render, ', data)
+const CommunityPostPage = () => {
+  const isSidebarLayout = useIsSidebarLayout()
 
   return (
-    <div>
-      <div>
-        <Link href="/test">go to test</Link>
-      </div>
-
-      <PostContent />
-    </div>
+    <>
+      {isSidebarLayout && <Br top={20} />}
+      <PostThread />
+    </>
   )
 }
 
-export default CommunityPage
+export default CommunityPostPage

src/app/providers/RootStoreProvider.tsx

@@ -7,6 +7,7 @@ import { enableStaticRendering } from 'mobx-react-lite'
 import { useStore } from '@/stores/init'
 
 import {
+  useMetric,
   useSession,
   useCommunity,
   useTags,
@@ -32,6 +33,7 @@ type TProps = {
 const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
   const userHasLogin = !!token
 
+  const metric = useMetric()
   const activeThread = useThreadParam()
   // console.log('## activeThread: ', activeThread)
 
@@ -50,6 +52,7 @@ const RootStoreWrapper: FC<TProps> = ({ children, token }) => {
   const filterSearchParams = useFilterSearchParams()
 
   const store = useStore({
+    metric,
     ...sesstion,
     articles: {
       pagedPosts,

src/app/queries/index.ts

@@ -7,10 +7,11 @@ import { values, includes } from 'ramda'
 import { useQuery } from '@urql/next'
 import { usePathname, useSearchParams } from 'next/navigation'
 
-import type { TCommunity } from '@/spec'
+import type { TCommunity, TMetric } from '@/spec'
 import { P } from '@/schemas'
 import { DEFAULT_THEME } from '@/config'
 import { THREAD, ARTICLE_THREAD } from '@/constant/thread'
+import METRIC from '@/constant/metric'
 import URL_PARAM from '@/constant/url_param'
 import { ARTICLE_CAT, ARTICLE_STATE, ARTICLE_ORDER } from '@/constant/gtd'
 
@@ -43,6 +44,17 @@ import {
 
 export { parseCommunity, useThreadParam } from './helper'
 
+export const useMetric = (): TMetric => {
+  const thread = useThreadParam()
+  const articleParams = useArticleParams()
+
+  if (includes(thread, values(ARTICLE_THREAD)) && articleParams.id) {
+    return METRIC.ARTICLE
+  }
+
+  return METRIC.COMMUNITY
+}
+
 export const useSession = (): TSessionRes => {
   const isStaticQuery = useIsStaticQuery()