TootAuthorGroup: remove css module

src/timelines/toots/TootAuthorGroup.css

@@ -0,0 +1,52 @@
+.TootAuthorGroup {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 8px;
+  contain: layout style;
+
+  > :not(:first-child) {
+    flex-grow: 1;
+  }
+}
+
+.TootAuthorGroup > .name-grp {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  color: var(--tutu-color-secondary-text-on-surface);
+
+  > :last-child {
+    grid-column: 1 /3;
+  }
+
+  >time {
+    text-align: end;
+  }
+
+  &:hover {
+    .tootAuthorNamePrimary {
+      text-decoration: underline;
+    }
+  }
+}
+
+.TootAuthorGroup > .name-grp > .name-primary {
+  color: var(--tutu-color-on-surface);
+
+  > .acct-mark {
+    font-size: 1.2em;
+    color: var(--tutu-color-secondary-text-on-surface);
+    vertical-align: sub;
+    margin-right: 0.25em;
+  }
+}
+
+.TootAuthorGroup > .avatar {
+  width: calc(var(--toot-avatar-size, 40px) - 1px);
+  aspect-ratio: 1/1;
+  object-fit: contain;
+  border-radius: 50% 50%;
+  overflow: hidden;
+  border: 1px solid var(--tutu-color-surface);
+  background-color: var(--tutu-color-surface-d);
+}

src/timelines/toots/TootAuthorGroup.tsx

@@ -0,0 +1,57 @@
+import { SmartToySharp, Lock } from "@suid/icons-material";
+import { formatRelative } from "date-fns";
+import type { mastodon } from "masto";
+import { createRenderEffect, Show, splitProps, type JSX } from "solid-js";
+import Img from "~material/Img";
+import { Body2 } from "~material/typography";
+import { useAppLocale } from "~platform/i18n";
+import { resolveCustomEmoji } from "../../masto/toot";
+import "./TootAuthorGroup.css";
+
+function TootAuthorGroup(
+  props: {
+    status: mastodon.v1.Status;
+    now: Date;
+  } & JSX.HTMLElementTags["div"],
+) {
+  const [managed, rest] = splitProps(props, ["status", "now"]);
+  const toot = () => managed.status;
+  const { dateFn: dateFnLocale } = useAppLocale();
+
+  return (
+    <div class="TootAuthorGroup" {...rest}>
+      <Img src={toot().account.avatar} class="avatar" />
+      <div class={"name-grp"}>
+        <div class="name-primary">
+          <Show when={toot().account.bot}>
+            <SmartToySharp class="acct-mark" aria-label="Bot" />
+          </Show>
+          <Show when={toot().account.locked}>
+            <Lock class="acct-mark" aria-label="Locked" />
+          </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(),
+          })}
+        </time>
+        <span>
+          @{toot().account.username}@{new URL(toot().account.url).hostname}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default TootAuthorGroup;