feat(header): add account bar with username

src/components/header/account-bar/account-bar.module.css

@@ -0,0 +1,36 @@
+.header {
+  position: absolute;
+  right: 0;
+  top: 0px;
+  bottom: unset;
+  border-bottom-left-radius: 7px;
+  border-top-left-radius: 0;
+  background-color: var(--background3);
+  padding: 4px;
+  line-height: 12px;
+}
+
+.user {
+  color: var(--border2);
+
+  a {
+    text-decoration: none;
+    color: var(--text1);
+  }
+}
+
+.separator {
+ color: var(--border2);
+ margin: 0px .7ex 0px .7ex;
+ cursor: default; 
+}
+
+.preferences {
+  text-decoration: none;
+  font-weight: bold;
+  color: var(--text1);
+}
+
+.preferences:hover {
+  text-decoration: underline !important;
+}

src/components/header/account-bar/account-bar.tsx

@@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+import styles from './account-bar.module.css';
+import { useAccount } from '@plebbit/plebbit-react-hooks';
+
+const AccountBar = () => {
+  const account = useAccount();
+
+  return (
+    <div className={styles.header}>
+      <span className={styles.user}>
+        <Link to='/user' onClick={(e) => e.preventDefault()}>
+          {account?.author.shortAddress}
+        </Link>
+      </span>
+      <span className={styles.separator}>|</span>
+      <Link to='/settings' className={styles.preferences} onClick={(e) => e.preventDefault()}>
+        preferences
+      </Link>
+    </div>
+  );
+};
+
+export default AccountBar;

src/components/header/account-bar/index.ts

@@ -0,0 +1 @@
+export {default} from './account-bar';

src/components/header/header.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import styles from './header.module.css';
 import useTheme from '../../hooks/use-theme';
+import AccountBar from './account-bar';
 
 const Header = () => {
   const { sortType } = useParams<{ sortType: string }>();
@@ -48,6 +49,7 @@ const Header = () => {
         </span>
         &nbsp;
       </div>
+      <AccountBar />
     </div>
   );
 };