Custom titleComponent for Timeline

src/app.css

@@ -1170,6 +1170,17 @@ meter.donut:is(.danger, .explode):after {
   text-shadow: 0 1px var(--bg-color);
 }
 
+/* ACCOUNT STATUSES */
+
+.header-account {
+  font-size: 90% !important;
+  cursor: pointer;
+}
+.header-account div {
+  font-weight: normal;
+  color: var(--text-insignificant-color);
+}
+
 @media (min-width: 40em) {
   html,
   body {

src/components/timeline.jsx

@@ -10,6 +10,7 @@ import Status from './status';
 
 function Timeline({
   title,
+  titleComponent,
   path,
   id,
   emptyText,
@@ -90,7 +91,8 @@ function Timeline({
               <Icon icon="home" size="l" />
             </Link>
           </div>
-          <h1>{title}</h1>
+          {uiState !== 'loading' &&
+            (titleComponent ? titleComponent : <h1>{title}</h1>)}
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
           </div>

src/pages/account-statuses.jsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import { useParams } from 'react-router-dom';
 
 import Timeline from '../components/timeline';
+import states from '../utils/states';
 
 const LIMIT = 20;
 
@@ -34,6 +35,19 @@ function AccountStatuses() {
     <Timeline
       key={id}
       title={`${account?.acct ? '@' + account.acct : 'Posts'}`}
+      titleComponent={
+        <h1
+          class="header-account"
+          onClick={() => {
+            states.showAccount = account;
+          }}
+        >
+          {account?.displayName}
+          <div>
+            <span>@{account?.acct}</span>
+          </div>
+        </h1>
+      }
       path="/a/:id"
       id="account_statuses"
       emptyText="Nothing to see here yet."