feat(home): show message linking to p/all when user has 0 subscriptions

plebbit · Feb 11, 2025 · afa1e3f · afa1e3f
1 parent 824f05c
commit afa1e3f
Show file tree

Hide file tree

Showing 7 changed files with 167 additions and 78 deletions.
diff --git a/public/assets/fakepost-subscribe-dark.png b/public/assets/fakepost-subscribe-dark.png
diff --git a/public/assets/fakepost-subscribe.png b/public/assets/fakepost-subscribe.png
diff --git a/src/components/over-18-warning/over-18-warning.module.css b/src/components/over-18-warning/over-18-warning.module.css
@@ -98,8 +98,8 @@
   border-radius: 3px;
   flex: 1;
   margin: 3px 5px;
-  background-color: #4f86b5;
-  border-bottom: 2px solid #4270a2;
+  background-color: var(--button-background-color);
+  border-bottom: 2px solid var(--button-border-bottom);
   user-select: none;
 }
 
@@ -115,7 +115,7 @@
 }
 
 .over18 .warningButtons button:hover {
-  background-color: #4980ae;
+  background-color: var(--button-background-color-hover);
 }
 
 .over18 .warningButtons button a {

diff --git a/src/themes.css b/src/themes.css
@@ -13,6 +13,9 @@
   --border-primary: #1f1f1f;
   --border-text: #3e3e3e;
   --box-border-color: gray;
+  --button-background-color: #38678f;
+  --button-background-color-hover: #356187;
+  --button-border-bottom: #325a85;
   --button-border-disabled: #6f6f6f34;
   --button-border-primary: #1f1f1f;
   --button-border-primary-hover: #3e3e3e;
@@ -28,6 +31,7 @@
   --continue-thread-arrow: url('/public/assets/buttons/continue-this-thread-arrow-dark.png');
   --code-background: rgb(19, 19, 13);
   --code-border: rgb(52, 58, 60);
+  --fakepost-subscribe: url('/public/assets/fakepost-subscribe-dark.png');
   --filter80: brightness(80%);
   --filter90: brightness(90%);
   --gray: #3e3e3e;
@@ -96,6 +100,9 @@
   --border-primary: #5f99cf;
   --border-text: gray;
   --box-border-color: #8D9CAA;
+  --button-background-color: #4f86b5;
+  --button-background-color-hover: #4980ae;
+  --button-border-bottom: #4270a2;
   --button-border-disabled: #dadada;
   --button-border-primary: #c4dbf1;
   --button-border-primary-hover: #879eb4;
@@ -111,6 +118,7 @@
   --continue-thread-arrow: url('/public/assets/buttons/continue-this-thread-arrow.png');
   --code-background: #fcfcfb;
   --code-border: #e6e6de;
+  --fakepost-subscribe: url('/public/assets/fakepost-subscribe.png');
   --filter80: brightness(100%);
   --filter90: brightness(100%);
   --gray: #c0c0c0;

diff --git a/src/views/home/home.module.css b/src/views/home/home.module.css
@@ -78,4 +78,71 @@
   font-weight: 700;
   color: var(--text-info);
   cursor: pointer;
+}
+
+.noSubscriptions {
+  text-align: center;
+  font-size: 12px;
+  margin-right: 310px;
+  color: var(--text);
+}
+
+.noSubscriptions h1 {
+  font-weight: bold;
+  font-size: 25px;
+  margin: 10px 0;
+}
+
+.squash {
+  margin: 1em auto;
+  max-width: 580px;
+  padding: 0 75px 0 60px;
+  box-sizing: border-box;
+}
+
+.squash img {
+  display: inline;
+  margin: 0;
+  vertical-align: bottom;
+  border: 0;
+  width: 12px;
+  height: 12px;
+  margin-left: 7px;
+}
+
+.fakePost {
+  margin: 1em auto;
+  vertical-align: bottom;
+  background-image: var(--fakepost-subscribe);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 500px;
+  height: 200px;
+  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
+}
+
+.findCommunities a {
+  background-color: var(--button-background-color);
+  color: #ffffff;
+  display: inline-block;
+  text-transform: uppercase;
+  font-weight: bold;
+  cursor: pointer;
+  border: 1px solid transparent;
+  padding: 4px 12px 3px;
+  line-height: 20px;
+  border-radius: 3px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-bottom: 2px solid var(--button-border-bottom);
+}
+
+.findCommunities a:hover {
+  background-color: var(--button-background-color-hover);
+  text-decoration: underline;
 }
diff --git a/src/views/home/home.tsx b/src/views/home/home.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, memo } from 'react';
+import { useEffect, useRef } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
 import { useAccount, useFeed } from '@plebbit/plebbit-react-hooks';
@@ -24,69 +24,68 @@ const LoadingStateFooter = ({ subplebbitAddresses }: { subplebbitAddresses: stri
   );
 };
 
-const Footer = memo(
-  ({
-    feed,
-    hasMore,
-    subplebbitAddresses,
-    subplebbitAddressesWithNewerPosts,
-    handleNewerPostsButtonClick,
-    params,
-    weeklyFeed,
-    monthlyFeed,
-    currentTimeFilterName,
-  }: any) => {
-    const { t } = useTranslation();
-    let footerContent;
-    if (feed.length === 0) {
-      footerContent = t('no_posts');
-    }
-    if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
-      footerContent = (
-        <>
-          {subplebbitAddressesWithNewerPosts.length > 0 ? (
+const Footer = ({
+  feed,
+  hasMore,
+  subplebbitAddresses,
+  subplebbitAddressesWithNewerPosts,
+  handleNewerPostsButtonClick,
+  params,
+  weeklyFeed,
+  monthlyFeed,
+  currentTimeFilterName,
+}: any) => {
+  const { t } = useTranslation();
+  let footerContent;
+  if (feed.length === 0) {
+    footerContent = t('no_posts');
+  }
+  if (hasMore || subplebbitAddresses.length > 0 || (subplebbitAddresses && subplebbitAddresses.length === 0)) {
+    footerContent = (
+      <>
+        {subplebbitAddressesWithNewerPosts.length > 0 ? (
+          <div className={styles.morePostsSuggestion}>
+            <Trans
+              i18nKey='newer_posts_available'
+              components={{
+                1: <span onClick={handleNewerPostsButtonClick} />,
+              }}
+            />
+          </div>
+        ) : (
+          monthlyFeed.length > feed.length &&
+          (weeklyFeed.length > feed.length ? (
             <div className={styles.morePostsSuggestion}>
               <Trans
-                i18nKey='newer_posts_available'
+                i18nKey='more_posts_last_week'
+                values={{ currentTimeFilterName }}
                 components={{
-                  1: <span onClick={handleNewerPostsButtonClick} />,
+                  1: <Link to={'/' + (params?.sortType || 'hot') + '/1w'} />,
                 }}
               />
             </div>
           ) : (
-            monthlyFeed.length > feed.length &&
-            (weeklyFeed.length > feed.length ? (
-              <div className={styles.morePostsSuggestion}>
-                <Trans
-                  i18nKey='more_posts_last_week'
-                  values={{ currentTimeFilterName }}
-                  components={{
-                    1: <Link to={'/' + (params?.sortType || 'hot') + '/1w'} />,
-                  }}
-                />
-              </div>
-            ) : (
-              <div className={styles.morePostsSuggestion}>
-                <Trans
-                  i18nKey='more_posts_last_month'
-                  values={{ currentTimeFilterName }}
-                  components={{
-                    1: <Link to={'/' + (params?.sortType || 'hot') + '/1m'} />,
-                  }}
-                />
-              </div>
-            ))
-          )}
-        </>
-      );
-    }
-    return <div className={styles.footer}>{footerContent}</div>;
-  },
-);
+            <div className={styles.morePostsSuggestion}>
+              <Trans
+                i18nKey='more_posts_last_month'
+                values={{ currentTimeFilterName }}
+                components={{
+                  1: <Link to={'/' + (params?.sortType || 'hot') + '/1m'} />,
+                }}
+              />
+            </div>
+          ))
+        )}
+      </>
+    );
+  }
+  return <div className={styles.footer}>{footerContent}</div>;
+};
 
 const Home = () => {
   useRedirectToDefaultSort();
   const { t } = useTranslation();
+  const account = useAccount();
   const subplebbitAddresses = useAccount()?.subscriptions || [];
   const params = useParams<{ sortType?: string; timeFilterName?: string }>();
   const sortType = params?.sortType || 'hot';
@@ -148,27 +147,42 @@ const Home = () => {
         <div className={`${styles.sidebar}`}>
           <Sidebar />
         </div>
-        <div className={styles.feed}>
-          <Virtuoso
-            increaseViewportBy={{ bottom: 1200, top: 600 }}
-            totalCount={feed?.length || 0}
-            data={feed}
-            itemContent={(index, post) => <Post index={index} post={post} />}
-            useWindowScroll={true}
-            components={{
-              Footer: () => (
-                <>
-                  <Footer {...footerProps} />
-                  <LoadingStateFooter subplebbitAddresses={subplebbitAddresses} />
-                </>
-              ),
-            }}
-            endReached={loadMore}
-            ref={virtuosoRef}
-            restoreStateFrom={lastVirtuosoState}
-            initialScrollTop={lastVirtuosoState?.scrollTop}
-          />
-        </div>
+        {subplebbitAddresses.length > 0 ? (
+          <div className={styles.feed}>
+            <Virtuoso
+              increaseViewportBy={{ bottom: 1200, top: 600 }}
+              totalCount={feed?.length || 0}
+              data={feed}
+              itemContent={(index, post) => <Post index={index} post={post} />}
+              useWindowScroll={true}
+              components={{
+                Footer: () => (
+                  <>
+                    <Footer {...footerProps} />
+                    <LoadingStateFooter subplebbitAddresses={subplebbitAddresses} />
+                  </>
+                ),
+              }}
+              endReached={loadMore}
+              ref={virtuosoRef}
+              restoreStateFrom={lastVirtuosoState}
+              initialScrollTop={lastVirtuosoState?.scrollTop}
+            />
+          </div>
+        ) : (
+          <div className={styles.noSubscriptions}>
+            <br />
+            <h1>{account?.author.displayName || account?.author.shortAddress}, this is your home on Seedit</h1>
+            <div className={styles.squash}>
+              When you find a community that you like, <strong>join with the</strong>
+              <img src={'/assets/buttons/all_feed_subscribe.png'} alt='' />
+            </div>
+            <div className={styles.fakePost} />
+            <div className={styles.findCommunities}>
+              <Link to='/p/all'>find communities on p/all</Link>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/views/submit-page/submit-page.module.css b/src/views/submit-page/submit-page.module.css
@@ -16,7 +16,7 @@
   font-size: 14px;
 }
 
-h1 {
+.content h1 {
   font-size: 18px;
   font-weight: normal;
   text-transform: lowercase;