Add profile metadata

src/components/account.css

@@ -31,3 +31,27 @@
 #account-container .actions button {
   align-self: flex-end;
 }
+
+#account-container .profile-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+#account-container .profile-field {
+  flex-grow: 1;
+  font-size: 90%;
+  background-color: var(--bg-faded-color);
+  padding: 12px;
+  border-radius: 8px;
+  filter: saturate(0.75);
+  line-height: 1.25;
+}
+
+#account-container .profile-field b {
+  font-size: 90%;
+  color: var(--text-insignificant-color);
+  text-transform: uppercase;
+}
+#account-container .profile-field p {
+  margin: 0;
+}

src/components/account.jsx

@@ -129,6 +129,18 @@ function Account({ account }) {
               __html: enhanceContent(note, { emojis }),
             }}
           />
+          <div class="profile-metadata">
+            {fields.map(({ name, value }) => (
+              <div class="profile-field" key={name}>
+                <b>{name}</b>
+                <p
+                  dangerouslySetInnerHTML={{
+                    __html: value,
+                  }}
+                />
+              </div>
+            ))}
+          </div>
           <p class="stats">
             <span>
               <b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts