add initial subscriptions box UI

src/components/styled/Home.styled.jsx

@@ -171,6 +171,11 @@ export const Boards = styled.div`
   padding: 0;
   padding-bottom: .5em;
   background: #fff;
+  word-wrap: break-word;
+
+  #subscriptions {
+    text-align: left;
+  }
 `;
 
 export const BoardsTitle = styled.div`
@@ -237,6 +242,22 @@ export const BoardsContent = styled.div`
     padding: 0 2px;
     white-space: pre-line;
   }
+
+  h3 {
+    font-size: 100%;
+    font-weight: 700;
+    text-align: left;
+  }
+
+  .boardlink {
+    color: #800;
+    text-decoration: none;
+
+    :hover {
+      text-decoration: underline;
+      color: #e00
+    }
+  }
 `;
 
 export const Footer = styled.div`

src/components/views/Home.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
-import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
+import { useAccount, useSubplebbit } from '@plebbit/plebbit-react-hooks';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from '../styled/Home.styled';
@@ -31,6 +31,7 @@ const Home = () => {
     setSelectedTitle
   } = useGeneralStore(state => state);
 
+  const account = useAccount();
   const inputRef = useRef(null);
   const navigate = useNavigate();
 
@@ -98,9 +99,30 @@ const Home = () => {
               </div>
             </AboutContent>
           </About>
+          {account.subscriptions?.length > 0 ? (
+            <Boards style={{marginBottom: '6px'}}>
+                <BoardsTitle>
+                  <h2>Board Subscriptions</h2>
+                </BoardsTitle>
+                <BoardsContent id="subscriptions">
+                  <h3 style={{textDecoration: 'underline', display: 'inline'}}>
+                    You have subscribed to {account.subscriptions.length} board{account.subscriptions.length > 1 ? "s" : null}
+                  </h3>
+                  <br />
+                  {account.subscriptions.map((subscription, index) => (
+                    <>
+                      <Link key={`sub-${index}`} class="boardlink" to={`/p/${subscription.subplebbitAddress}`}>
+                        {subscription}
+                      </Link>
+                      <br />
+                    </>
+                  ))}
+                </BoardsContent>
+            </Boards>
+          ) : null}
           <Boards>
               <BoardsTitle>
-                <h2>Popular boards</h2>
+                <h2>Popular Boards</h2>
               </BoardsTitle>
               <BoardsContent>
                 {defaultSubplebbits.map(subplebbit => (