Add account statuses timeline + few aesthetic changes to Account sheet

And secretly link to this timeline, don't tell anyone lol

src/app.jsx

@@ -23,6 +23,7 @@ import Loader from './components/loader';
 import MediaModal from './components/media-modal';
 import Modal from './components/modal';
 import NotFound from './pages/404';
+import AccountStatuses from './pages/account-statuses';
 import Bookmarks from './pages/bookmarks';
 import Favourites from './pages/favourites';
 import Hashtags from './pages/hashtags';
@@ -208,6 +209,7 @@ function App() {
         {isLoggedIn && <Route path="/f" element={<Favourites />} />}
         {isLoggedIn && <Route path="/l/:id" element={<Lists />} />}
         {isLoggedIn && <Route path="/t/:hashtag" element={<Hashtags />} />}
+        {isLoggedIn && <Route path="/a/:id" element={<AccountStatuses />} />}
         <Route path="/p/l?/:instance" element={<Public />} />
         {/* <Route path="/:anything" element={<NotFound />} /> */}
       </Routes>
@@ -299,7 +301,12 @@ function App() {
             }
           }}
         >
-          <Account account={snapStates.showAccount} />
+          <Account
+            account={snapStates.showAccount}
+            onClose={() => {
+              states.showAccount = false;
+            }}
+          />
         </Modal>
       )}
       {!!snapStates.showDrafts && (

src/components/account.css

@@ -20,10 +20,20 @@
 #account-container .stats {
   display: flex;
   flex-wrap: wrap;
-  column-gap: 16px;
-  row-gap: 4px;
+  justify-content: space-around;
+  gap: 16px;
   opacity: 0.75;
   font-size: 90%;
+  background-color: var(--bg-faded-color);
+  padding: 12px;
+  border-radius: 8px;
+  line-height: 1.25;
+}
+#account-container .stats > * {
+  text-align: center;
+}
+#account-container .stats a {
+  color: inherit;
 }
 
 #account-container .actions {

src/components/account.jsx

@@ -11,9 +11,10 @@ import store from '../utils/store';
 
 import Avatar from './avatar';
 import Icon from './icon';
+import Link from './link';
 import NameText from './name-text';
 
-function Account({ account }) {
+function Account({ account, onClose }) {
   const [uiState, setUIState] = useState('default');
   const isString = typeof account === 'string';
   const [info, setInfo] = useState(isString ? null : account);
@@ -217,21 +218,31 @@ function Account({ account }) {
                 </div>
               )}
               <p class="stats">
-                <span>
-                  <b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
+                <Link to={`/a/${id}`} onClick={onClose}>
                   Posts
-                </span>
+                  <br />
+                  <b title={statusesCount}>
+                    {shortenNumber(statusesCount)}
+                  </b>{' '}
+                </Link>
                 <span>
-                  <b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
                   Following
+                  <br />
+                  <b title={followingCount}>
+                    {shortenNumber(followingCount)}
+                  </b>{' '}
                 </span>
                 <span>
-                  <b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
                   Followers
+                  <br />
+                  <b title={followersCount}>
+                    {shortenNumber(followersCount)}
+                  </b>{' '}
                 </span>
                 {!!createdAt && (
                   <span>
-                    Joined:{' '}
+                    Joined
+                    <br />
                     <b>
                       <time datetime={createdAt}>
                         {Intl.DateTimeFormat('en', {

src/pages/account-statuses.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useParams } from 'react-router-dom';
+
+import Timeline from '../components/timeline';
+
+const LIMIT = 20;
+
+function AccountStatuses() {
+  const { id } = useParams();
+  const accountStatusesIterator = useRef();
+  async function fetchAccountStatuses(firstLoad) {
+    if (firstLoad || !accountStatusesIterator.current) {
+      accountStatusesIterator.current = masto.v1.accounts.listStatuses(id, {
+        limit: LIMIT,
+      });
+    }
+    return await accountStatusesIterator.current.next();
+  }
+
+  const [account, setAccount] = useState({});
+  useEffect(() => {
+    (async () => {
+      try {
+        const acc = await masto.v1.accounts.fetch(id);
+        console.log(acc);
+        setAccount(acc);
+      } catch (e) {
+        console.error(e);
+      }
+    })();
+  }, [id]);
+
+  return (
+    <Timeline
+      key={id}
+      title={`${account?.acct ? '@' + account.acct : 'Posts'}`}
+      id="account_statuses"
+      emptyText="Nothing to see here yet."
+      errorText="Unable to load statuses"
+      fetchItems={fetchAccountStatuses}
+    />
+  );
+}
+
+export default AccountStatuses;