RegularToot: supports bot mark

src/material/Button.tsx

@@ -1,5 +1,6 @@
 import { Component, JSX, splitProps } from "solid-js";
 import materialStyles from "./material.module.css";
+import "./typography.css";
 
 /**
  * Material-styled button.
@@ -10,12 +11,15 @@ const Button: Component<JSX.ButtonHTMLAttributes<HTMLButtonElement>> = (
   props,
 ) => {
   const [managed, passthough] = splitProps(props, ["class", "type"]);
-  const classes = () =>
-    managed.class
-      ? [materialStyles.button, managed.class].join(" ")
-      : materialStyles.button;
   const type = () => managed.type ?? "button";
-  return <button type={type()} class={classes()} {...passthough}></button>;
+
+  return (
+    <button
+      type={type()}
+      class={`${materialStyles.button} buttonText ${managed.class || ""}`}
+      {...passthough}
+    ></button>
+  );
 };
 
 export default Button;

src/material/material.module.css

@@ -10,7 +10,6 @@
 }
 
 .button {
-  composes: buttonText from "./typography.module.css";
   composes: touchTarget;
 
   border: none;

src/material/typography.css

@@ -29,12 +29,11 @@
   font-size: var(--subheading-size);
 }
 
-.body1 {
+.body1, .body2 {
   font-size: var(--body-size);
 }
 
 .body2 {
-  composes: body1;
   font-weight: var(--body2-weight);
 }
 

src/material/typography.tsx

@@ -1,7 +1,6 @@
 import { JSX, ParentComponent, splitProps, type Ref } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import typography from "./typography.module.css";
-import { mergeClass } from "../utils";
+import "./typography.css";
 
 type AnyElement = keyof JSX.IntrinsicElements | ParentComponent<any>;
 
@@ -40,13 +39,11 @@ export function Typography<T extends AnyElement>(
     "class",
     "typography",
   ]);
-  const classes = () =>
-    mergeClass(managed.class, typography[managed.typography]);
   return (
     <Dynamic
       ref={managed.ref}
       component={managed.component ?? "span"}
-      class={classes()}
+      class={`${managed.class} ${managed.typography}`}
       {...passthough}
     ></Dynamic>
   );

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
-              ref={(e) =>
-                createRenderEffect(() => (e.innerHTML = displayName()))
-              }
-              aria-label="Display name"
-            ></span>
+            <div class="display-name">
+              <Show when={profile()?.bot}>
+                <SmartToySharp class="bot-mark" aria-label="Bot" />
+              </Show>
+              <Body2
+                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={

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
-          class={tootStyle.tootAuthorNamePrimary}
-          ref={(e: { innerHTML: string }) => {
-            createRenderEffect(() => {
-              e.innerHTML = resolveCustomEmoji(
-                toot().account.displayName,
-                toot().account.emojis,
-              );
-            });
-          }}
-        />
+        <div class={tootStyle.tootAuthorNamePrimary}>
+          <Show when={toot().account.bot}>
+            <SmartToySharp class="bot-mark" aria-label="Bot" />
+          </Show>
+          <Body2
+            component="span"
+            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 {