Recommended bar: extra options for ease of discovery

ui/component/claimListDiscover/view.jsx

@@ -17,6 +17,8 @@ import { useIsLargeScreen } from 'effects/use-screensize';
 
 type Props = {
   uris: Array<string>,
+  showHeader: boolean,
+  type: string,
   subscribedChannels: Array<Subscription>,
   doClaimSearch: ({}) => void,
   loading: boolean,
@@ -72,6 +74,8 @@ function ClaimListDiscover(props: Props) {
   const {
     doClaimSearch,
     claimSearchByQuery,
+    showHeader = true,
+    type,
     claimSearchByQueryLastPageReached,
     tags,
     defaultTags,
@@ -503,13 +507,15 @@ function ClaimListDiscover(props: Props) {
         </div>
       ) : (
         <div>
+          {showHeader && (
           <div className="section__header--actions">
             {headerToUse}
             {meta && <div className="section__actions--no-margin">{meta}</div>}
           </div>
-
+          )}
           <ClaimList
             id={claimSearchCacheQuery}
+            type={type}
             loading={loading}
             uris={uris || claimSearchResult}
             onScrollBottom={handleScrollBottom}
@@ -521,7 +527,7 @@ function ClaimListDiscover(props: Props) {
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
           />
-          {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}
+          {loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" type={type} />)}
         </div>
       )}
     </React.Fragment>

ui/component/recommendedContent/view.jsx

@@ -1,10 +1,13 @@
 // @flow
 import { SHOW_ADS, SIMPLE_SITE } from 'config';
 import React from 'react';
+import classnames from 'classnames';
 import ClaimList from 'component/claimList';
+import ClaimListDiscover from 'component/claimListDiscover';
 import Ads from 'web/component/ads';
 import Card from 'component/common/card';
 import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
+import Button from 'component/button';
 
 type Props = {
   uri: string,
@@ -26,6 +29,14 @@ export default function RecommendedContent(props: Props) {
     isSearching,
     isAuthenticated,
   } = props;
+  const [expanded, setExpanded] = React.useState(false);
+  const [allRelated, setAllRelated] = React.useState(true);
+  const [moreFrom, setMoreFrom] = React.useState(false);
+  const [tagList, setTagList] = React.useState(false);
+  const signingChannel = claim && claim.signing_channel;
+  const channelName = signingChannel ? signingChannel.name : null;
+  const claimValue = claim && claim.value;
+  const tags = claimValue ? claimValue.tags : null;
   const isMobile = useIsMobile();
   const isMedium = useIsMediumScreen();
 
@@ -55,25 +66,129 @@ export default function RecommendedContent(props: Props) {
       smallTitle={!isMobile && !isMedium}
       className="file-page__recommended"
       title={__('Related')}
-      body={
-        <ClaimList
-          type="small"
-          loading={isSearching}
-          uris={reorderList(recommendedContent)}
-          hideMenu={isMobile}
-          injectedItem={
-            SHOW_ADS && IS_WEB ? (
-              SIMPLE_SITE ? (
-                <Ads small type={'google'} uri={uri} />
-              ) : (
-                !isAuthenticated && <Ads small type={'video'} />
-              )
+      subtitle={
+        <div
+          className={classnames({
+            'related_content-more--contracted': !expanded,
+            'related_content-more--expanded': expanded,
+          })}
+        >
+          <Button
+            button="alt"
+            label={__('All')}
+            onClick={() => {
+              setAllRelated(true);
+              setMoreFrom(false);
+              setTagList(false);
+            }}
+          />
+          {channelName && (
+            <Button
+              button="alt"
+              label={__('More from %claim_name%', { claim_name: channelName })}
+              onClick={() => {
+                setAllRelated(false);
+                setMoreFrom(true);
+                setTagList(false);
+              }}
+            />
+          )}
+          {tags &&
+            (expanded ? (
+              <Button button="link" label={__('Less')} onClick={() => setExpanded(!expanded)} />
             ) : (
-              false
-            )
-          }
-          empty={__('No related content found')}
-        />
+              <Button button="link" label={__('More')} onClick={() => setExpanded(!expanded)} />
+            ))}
+          {tags &&
+            tags.map((name) => (
+              <Button
+                button="alt"
+                label={__(`${name}`)}
+                onClick={() => {
+                  setAllRelated(false);
+                  setMoreFrom(false);
+                  setTagList(name);
+                }}
+              />
+            ))}
+        </div>
+      }
+      body={
+        <div>
+          {allRelated && (
+            <ClaimList
+              type="small"
+              loading={isSearching}
+              uris={reorderList(recommendedContent)}
+              hideMenu={isMobile}
+              injectedItem={
+                SHOW_ADS && IS_WEB ? (
+                  SIMPLE_SITE ? (
+                    <Ads small type={'google'} uri={uri} />
+                  ) : (
+                    !isAuthenticated && <Ads small type={'video'} />
+                  )
+                ) : (
+                  false
+                )
+              }
+              empty={__('No related content found')}
+            />
+          )}
+          {moreFrom && (
+            <ClaimListDiscover
+              hideAdvancedFilter={true}
+              tileLayout={false}
+              showHeader={false}
+              type="small"
+              claimType={['stream']}
+              orderBy="new"
+              pageSize={20}
+              infiniteScroll={false}
+              hideFilters={true}
+              channelIds={[signingChannel.claim_id]}
+              loading={isSearching}
+              hideMenu={isMobile}
+              injectedItem={
+                SHOW_ADS && IS_WEB ? (
+                  SIMPLE_SITE ? (
+                    <Ads small type={'google'} uri={uri} />
+                  ) : (
+                    !isAuthenticated && <Ads small type={'video'} />
+                  )
+                ) : (
+                  false
+                )
+              }
+              empty={__('No related content found')}
+            />
+          )}
+          {tagList && (
+            <ClaimListDiscover
+              hideAdvancedFilter={true}
+              type="small"
+              claimType={['stream']}
+              feeAmount="0"
+              pageSize={20}
+              infiniteScroll={false}
+              tags={[tagList]}
+              loading={isSearching}
+              hideMenu={isMobile}
+              injectedItem={
+                SHOW_ADS && IS_WEB ? (
+                  SIMPLE_SITE ? (
+                    <Ads small type={'google'} uri={uri} />
+                  ) : (
+                    !isAuthenticated && <Ads small type={'video'} />
+                  )
+                ) : (
+                  false
+                )
+              }
+              empty={__('No related content found')}
+            />
+          )}
+        </div>
       }
     />
   );

ui/scss/component/_card.scss

@@ -255,6 +255,24 @@
   color: var(--color-text-subtitle);
   margin: var(--spacing-s) 0;
   font-size: var(--font-body);
+
+  .button{
+    margin: calc(var(--spacing-xxs) / 2) calc(var(--spacing-xxs) / 2);
+    height: calc(var(--height-button) * 2 / 3);
+    padding: var(--spacing-s);
+    border-radius: var(--height-input);
+    font-size: var(--font-small);
+  }
+}
+
+.related_content-more--contracted {
+  margin: calc(var(--spacing-s) * -1) 0;
+  height: calc(var(--height-button) * 0.9);
+  overflow: hidden;
+}
+
+.related_content-more--expanded {
+  margin: calc(var(--spacing-s) * -1) 0;
 }
 
 .card__body {