diff --git a/web/sidebar/community-drawer-item-handler.react.js b/web/sidebar/community-drawer-item-handler.react.js --- a/web/sidebar/community-drawer-item-handler.react.js +++ b/web/sidebar/community-drawer-item-handler.react.js @@ -2,4 +2,5 @@ export type CommunityDrawerItemHandler = { +onClick: (event: SyntheticEvent) => void, + +isActive: boolean, }; diff --git a/web/sidebar/community-drawer-item-handlers.react.js b/web/sidebar/community-drawer-item-handlers.react.js --- a/web/sidebar/community-drawer-item-handlers.react.js +++ b/web/sidebar/community-drawer-item-handlers.react.js @@ -9,7 +9,10 @@ } from 'lib/types/filter-types'; import type { ThreadInfo } from 'lib/types/thread-types'; -import { useOnClickThread } from '../selectors/thread-selectors'; +import { + useOnClickThread, + useThreadIsActive, +} from '../selectors/thread-selectors'; import type { NavigationTab } from '../types/nav-types'; import type { CommunityDrawerItemHandler } from './community-drawer-item-handler.react'; @@ -21,8 +24,12 @@ function ChatDrawerItemHandler(props: HandlerProps): React.Node { const { setHandler, threadInfo } = props; const onClick = useOnClickThread(threadInfo); - const handler = React.useMemo(() => ({ onClick }), [onClick]); + const isActive = useThreadIsActive(threadInfo.id); + const handler = React.useMemo(() => ({ onClick, isActive }), [ + isActive, + onClick, + ]); React.useEffect(() => { setHandler(handler); }, [handler, setHandler]); @@ -45,8 +52,12 @@ }), [dispatch, threadInfo.id], ); - const handler = React.useMemo(() => ({ onClick }), [onClick]); + const isActive = false; + const handler = React.useMemo(() => ({ onClick, isActive }), [ + onClick, + isActive, + ]); React.useEffect(() => { setHandler(handler); }, [handler, setHandler]); diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css --- a/web/sidebar/community-drawer-item.css +++ b/web/sidebar/community-drawer-item.css @@ -5,6 +5,12 @@ padding-bottom: 8px; } +.active { + background-color: var(--active-drawer-item); + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + .threadListContainer { display: flex; flex-direction: column; @@ -51,6 +57,8 @@ background-color: var(--drawer-open-community-bg); border-top-right-radius: 8px; border-bottom-right-radius: 8px; + padding-top: 4px; + padding-bottom: 4px; } .subchannelsButton { diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js --- a/web/sidebar/community-drawer-item.react.js +++ b/web/sidebar/community-drawer-item.react.js @@ -109,11 +109,15 @@ const titleLabel = classnames(css.title, css[labelStyle]); const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]); + const threadEntry = classnames({ + [css.threadEntry]: true, + [css.active]: handler.isActive, + }); return ( <> -
+
{itemExpandButton}
{uiName}
diff --git a/web/theme.css b/web/theme.css --- a/web/theme.css +++ b/web/theme.css @@ -200,4 +200,5 @@ --drawer-item-color: var(--shades-white-60); --drawer-open-community-bg: #191919; --drawer-bg: var(--shades-black-90); + --active-drawer-item: rgba(0, 0, 0, 0.5); }