RegularToot: supports bot mark

src/timelines/RegularToot.tsx

@@ -20,6 +20,7 @@ import {
   StarOutline,
   Bookmark,
   Share,
+  SmartToySharp,
 } from "@suid/icons-material";
 import { useTimeSource } from "../platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
@@ -151,17 +152,22 @@ function TootAuthorGroup(
     <div class={tootStyle.tootAuthorGrp} {...rest}>
       <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
       <div class={tootStyle.tootAuthorNameGrp}>
-        <Body2
+        <div class={tootStyle.tootAuthorNamePrimary}>
-          class={tootStyle.tootAuthorNamePrimary}
+          <Show when={toot().account.bot}>
-          ref={(e: { innerHTML: string }) => {
+            <SmartToySharp class="bot-mark" aria-label="Bot" />
-            createRenderEffect(() => {
+          </Show>
-              e.innerHTML = resolveCustomEmoji(
+          <Body2
-                toot().account.displayName,
+            component="span"
-                toot().account.emojis,
+            ref={(e: { innerHTML: string }) => {
-              );
+              createRenderEffect(() => {
-            });
+                e.innerHTML = resolveCustomEmoji(
-          }}
+                  toot().account.displayName,
-        />
+                  toot().account.emojis,
+                );
+              });
+            }}
+          />
+        </div>
         <time datetime={toot().createdAt}>
           {formatRelative(toot().createdAt, managed.now, {
             locale: dateFnLocale(),

src/timelines/toot.module.css

@@ -49,10 +49,7 @@
 .tootAuthorNameGrp {
   display: grid;
   grid-template-columns: 1fr auto;
-
+  color: var(--tutu-color-secondary-text-on-surface);
-  >* {
-    color: var(--tutu-color-secondary-text-on-surface);
-  }
 
   > :last-child {
     grid-column: 1 /3;
@@ -70,7 +67,14 @@
 }
 
 .tootAuthorNamePrimary {
-  color: revert;
+  color: var(--tutu-color-on-surface);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  > :global(.bot-mark) {
+    font-size: 1.2em;
+  }
 }
 
 .tootAvatar {