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,8 +152,12 @@ function TootAuthorGroup(
     <div class={tootStyle.tootAuthorGrp} {...rest}>
       <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
       <div class={tootStyle.tootAuthorNameGrp}>
+        <div class={tootStyle.tootAuthorNamePrimary}>
+          <Show when={toot().account.bot}>
+            <SmartToySharp class="bot-mark" aria-label="Bot" />
+          </Show>
           <Body2
-          class={tootStyle.tootAuthorNamePrimary}
+            component="span"
             ref={(e: { innerHTML: string }) => {
               createRenderEffect(() => {
                 e.innerHTML = resolveCustomEmoji(
@@ -162,6 +167,7 @@ function TootAuthorGroup(
               });
             }}
           />
+        </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);
-  }
 
   > :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 {