Profile: supports bot mark

src/profiles/Profile.css

@@ -38,6 +38,16 @@
     flex-flow: column nowrap;
   }
 
+  .bot-mark {
+    font-size: 1.2em;
+  }
+
+  .display-name {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
   table.acct-fields {
     word-break: break-all;
 

src/profiles/Profile.tsx

@@ -38,10 +38,12 @@ import {
   PlaylistAdd,
   Send,
   Share,
+  SmartToy,
+  SmartToySharp,
   Translate,
   Verified,
 } from "@suid/icons-material";
-import { Title } from "../material/typography";
+import { Body2, Title } from "../material/typography";
 import { useNavigate, useParams } from "@solidjs/router";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -400,15 +402,21 @@ const Profile: Component = () => {
             }}
           ></Avatar>
           <div class="name-grp">
-            <span
+            <div class="display-name">
-              ref={(e) =>
+              <Show when={profile()?.bot}>
-                createRenderEffect(() => (e.innerHTML = displayName()))
+                <SmartToySharp class="bot-mark" aria-label="Bot" />
-              }
+              </Show>
-              aria-label="Display name"
+              <Body2
-            ></span>
+                component="span"
+                ref={(e: HTMLElement) =>
+                  createRenderEffect(() => (e.innerHTML = displayName()))
+                }
+                aria-label="Display name"
+              ></Body2>
+            </div>
             <span aria-label="Complete username">{fullUsername()}</span>
           </div>
-          <div>
+          <div role="presentation">
             <Switch>
               <Match
                 when={