diff --git a/web/sidebar/community-drawer-content.css b/web/sidebar/community-drawer-content.css new file mode 100644 --- /dev/null +++ b/web/sidebar/community-drawer-content.css @@ -0,0 +1,10 @@ +.container { + background-color: var(--drawer-bg); + display: flex; + overflow-y: auto; + flex-direction: column; + padding-right: 8px; + padding-top: 8px; + padding-bottom: 8px; + align-self: flex-start; +} diff --git a/web/sidebar/community-drawer-content.react.js b/web/sidebar/community-drawer-content.react.js new file mode 100644 --- /dev/null +++ b/web/sidebar/community-drawer-content.react.js @@ -0,0 +1,55 @@ +// @flow + +import * as React from 'react'; +import { useSelector } from 'react-redux'; + +import { + childThreadInfos, + communityThreadSelector, +} from 'lib/selectors/thread-selectors'; +import { + createRecursiveDrawerItemsData, + appendSuffix, +} from 'lib/utils/drawer-utils.react'; + +import css from './community-drawer-content.css'; +import CommunityDrawerItemCommunity from './community-drawer-item-community.react'; + +const maxDepth = 2; +const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2']; + +function CommunityDrawerContent(): React.Node { + const childThreadInfosMap = useSelector(childThreadInfos); + const communities = useSelector(communityThreadSelector); + const communitiesSuffixed = React.useMemo(() => appendSuffix(communities), [ + communities, + ]); + + const drawerItemsData = createRecursiveDrawerItemsData( + childThreadInfosMap, + communitiesSuffixed, + labelStyles, + maxDepth, + ); + + const [openCommunity, setOpenCommunity] = React.useState( + communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null, + ); + + const setOpenCommunityOrClose = React.useCallback((index: string) => { + setOpenCommunity(open => (open === index ? null : index)); + }, []); + + const communitiesComponents = drawerItemsData.map(item => ( + + )); + + return
{communitiesComponents}
; +} + +export default CommunityDrawerContent; diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js new file mode 100644 --- /dev/null +++ b/web/sidebar/community-drawer.react.js @@ -0,0 +1,16 @@ +// @flow + +import * as React from 'react'; + +import { ThreadListProvider } from '../chat/thread-list-provider'; +import CommunityDrawerContent from './community-drawer-content.react'; + +function CommunityDrawer(): React.Node { + return ( + + + + ); +} + +export default CommunityDrawer; diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -198,4 +198,5 @@ --drawer-expand-button-disabled: var(--shades-black-80); --drawer-item-color: var(--shades-white-60); --drawer-open-community-bg: #191919; + --drawer-bg: var(--shades-black-90); }