add default subplebbit addresses

src/hooks/use-default-subplebbits.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from 'react';
+
+interface Subplebbit {
+  title?: string;
+  address: string;
+  tags?: string[];
+  features?: string[];
+}
+
+let cache: Subplebbit[] | null = null;
+
+const useDefaultSubplebbits = () => {
+  const [subplebbits, setSubplebbits] = useState<Subplebbit[]>([]);
+
+  useEffect(() => {
+    if (cache) {
+      return;
+    }
+    (async () => {
+      try {
+        const multisub = await fetch(
+          'https://raw.githubusercontent.com/plebbit/temporary-default-subplebbits/master/multisub.json',
+          // { cache: 'no-cache' }
+        ).then((res) => res.json());
+        cache = multisub.subplebbits;
+        setSubplebbits(multisub.subplebbits);
+      } catch (e) {
+        console.warn(e);
+      }
+    })();
+  }, []);
+
+  return cache || subplebbits;
+};
+
+export const useDefaultSubplebbitAddresses = () => {
+  const defaultSubplebbits = useDefaultSubplebbits();
+  return useMemo(() => defaultSubplebbits.map((subplebbit: Subplebbit) => subplebbit.address), [defaultSubplebbits]);
+};
+
+export default useDefaultSubplebbits;

src/hooks/use-theme.ts

@@ -6,7 +6,7 @@ interface ThemeState {
 }
 
 const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState']) => ({
-  theme: localStorage.getItem('theme') || 'yotsuba',
+  theme: localStorage.getItem('theme') || 'yotsuba-b',
   setTheme: (theme: string) => {
     localStorage.setItem('theme', theme);
     set({ theme });

src/themes.css

@@ -5,10 +5,16 @@
   --secondary-color: #fca;
   --text-color-on-primary: #fff;
   --text-color-on-secondary: #800;
+  --text-color-on-secondary-hover: #c63;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
   --background-text-color: #fff;
-  --link-text-color: #00f;
+  --external-link-text-color: #00f;
+  --external-link-text-decoration: underline;
+  --internal-link-text-color: #800;
+  --internal-link-text-color-hover: #e00;
+  --internal-link-text-decoration: none;
+  --internal-link-text-decoration-hover: underline;
 }
 
 :root .yotsuba-b {
@@ -18,8 +24,14 @@
   --secondary-color: #98e;
   --text-color-on-primary: #000;
   --text-color-on-secondary: #000;
+  --text-color-on-secondary-hover: #fff;
   --text-color-standard: #000;
   --text-color-inverse: #fff;
   --background-text-color: #fff;
-  --link-text-color: #00f;
+  --external-link-text-color: #00f;
+  --external-link-text-decoration: underline;
+  --internal-link-text-color: #34345c;
+  --internal-link-text-color-hover: #d00;
+  --internal-link-text-decoration: none;
+  --internal-link-text-decoration-hover: underline;
 }

src/views/home/home.module.css

@@ -29,6 +29,7 @@
 }
 
 .box {
+  position: relative;
   background: var(--background-text-color);
   color: var(--text-color-standard);
   border: 1px solid;
@@ -56,6 +57,19 @@
   font-weight: 700;
 }
 
+.boxBar span {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-right: 0.25em;
+  text-transform: lowercase;
+}
+
+.boxBar span:hover {
+  cursor: pointer;
+  color: var(--text-color-on-secondary-hover);
+}
+
 .boxContent {
   line-height: 1.5em;
   font-size: 93%;
@@ -65,7 +79,7 @@
 }
 
 .boxContent a, .boxContent a:visited{
-  color: var(--link-text-color);
+  color: var(--external-link-text-color);
 }
 
 .searchBar {
@@ -102,6 +116,39 @@
   text-transform: capitalize;
 }
 
+.list a {
+  display: inline-block;
+  color: var(--internal-link-text-color);
+  text-decoration: var(--internal-link-text-decoration);
+}
+
+.list a:hover {
+  color: var(--internal-link-text-color-hover);
+  text-decoration: var(--internal-link-text-decoration-hover);
+}
+
+.boardsBoxContent {
+  font-size: 93%;
+  padding: 0.5em;
+  padding-top: 0.25em;
+  padding-bottom: 0;
+  line-height: 130%;
+  display: table;
+}
+
+.boardsBoxContent .column {
+  float: left;
+  width: 163px;
+  margin-right: 20px;
+  overflow: hidden;
+}
+
+.boardsBoxContent h3 {
+  font-size: 100%;
+  font-weight: 700;
+  text-decoration: underline;
+  color: var(--text-color-on-secondary);
+}
 
 @media (max-width: 768px) {
   .content {

src/views/home/home.tsx

@@ -2,6 +2,7 @@ import styles from './home.module.css';
 import useTheme from '../../hooks/use-theme';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
+import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
 
 // TODO: remove theme and languages selectors for debugging
 const ThemeSettings = () => {
@@ -40,9 +41,82 @@ const LanguageSettings = () => {
   );
 };
 
-const Home = () => {
+const SearchBar = () => {
   const { t } = useTranslation();
+  return (
+    <div className={styles.searchBar}>
+      <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
+      <button>{t('go')}</button>
+    </div>
+  );
+};
 
+const InfoBox = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
+        <h2>{t('what_is_plebchan')}</h2>
+      </div>
+      <div className={styles.boxContent}>
+        <Trans i18nKey='plebchan_description' shouldUnescape={true} components={{ 1: <Link to='https://plebbit.com' target='_blank' rel='noopener noreferrer' /> }} />
+        <br />
+        <br />
+        {t('no_global_rules_info')}
+      </div>
+    </div>
+  );
+};
+
+const Boards = () => {
+  const { t } = useTranslation();
+  const defaultSubplebbitAddresses = useDefaultSubplebbitAddresses();
+
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+        <h2 className={styles.capitalize}>{t('boards')}</h2>
+        <span>{t('options')} ▼</span>
+      </div>
+      <div className={styles.boardsBoxContent}>
+        <div className={styles.column}>
+          <h3>Default SFW</h3>
+          <div className={styles.list}>
+            {defaultSubplebbitAddresses.map((address) => (
+              <div className={styles.subplebbit} key={address}>
+                <Link to={`/b/${address}`}>{address}</Link>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className={styles.column}>
+          <h3>Default NSFW</h3>
+        </div>
+        <div className={styles.column}>
+          <h3>Subscriptions</h3>
+        </div>
+        <div className={styles.column}>
+          <h3>Moderating</h3>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const PopularThreads = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.box}>
+      <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
+        <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
+        <span>{t('options')} ▼</span>
+      </div>
+      <div className={styles.boxContent}></div>
+    </div>
+  );
+};
+
+const Home = () => {
   return (
     <div className={styles.content}>
       <div className={styles.debug}>
@@ -54,33 +128,10 @@ const Home = () => {
           <img alt='plebchan' src='/assets/logo/logo-transparent.png' />
         </div>
       </Link>
-      <div className={styles.searchBar}>
-        <input type='text' placeholder={`"board.eth" ${t('or')} "12D3KooW..."`} />
-        <button>{t('go')}</button>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.primaryColorBar}`}>
-          <h2>{t('what_is_plebchan')}</h2>
-        </div>
-        <div className={styles.boxContent}>
-          <Trans i18nKey='plebchan_description' shouldUnescape={true} components={{ 1: <Link to='https://plebbit.com' target='_blank' rel='noopener noreferrer' /> }} />
-          <br />
-          <br />
-          {t('no_global_rules_info')}
-        </div>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
-          <h2 className={styles.capitalize}>{t('boards')}</h2>
-        </div>
-        <div className={styles.boxContent}></div>
-      </div>
-      <div className={styles.box}>
-        <div className={`${styles.boxBar} ${styles.secondaryColorBar}`}>
-          <h2 className={styles.capitalize}>{t('popular_threads')}</h2>
-        </div>
-        <div className={styles.boxContent}></div>
-      </div>
+      <SearchBar />
+      <InfoBox />
+      <Boards />
+      <PopularThreads />
     </div>
   );
 };