initial commit

src/timelines/CompactToot.tsx

@@ -0,0 +1,57 @@
+import type { mastodon } from "masto";
+import { type Component } from "solid-js";
+import tootStyle from "./toot.module.css";
+import { formatRelative } from "date-fns";
+import Img from "../material/Img";
+import { Body2 } from "../material/typography";
+import { css } from "solid-styled";
+import { appliedCustomEmoji } from "../masto/toot";
+import cardStyle from "../material/cards.module.css";
+
+type CompactTootProps = {
+  status: mastodon.v1.Status;
+  now: Date;
+  class?: string;
+};
+
+const CompactToot: Component<CompactTootProps> = (props) => {
+  const toot = () => props.status;
+  return (
+    <section
+      class={[tootStyle.compact,  props.class || ""].join(" ")}
+      lang={toot().language || undefined}
+    >
+      <Img
+        src={toot().account.avatar}
+        class={[
+          tootStyle.tootAvatar,
+        ].join(" ")}
+      />
+      <div class={[tootStyle.compactAuthorGroup].join(' ')}>
+        <Body2
+          ref={(e: { innerHTML: string }) => {
+            appliedCustomEmoji(
+              e,
+              toot().account.displayName,
+              toot().account.emojis,
+            );
+          }}
+        ></Body2>
+        <span class={tootStyle.compactAuthorUsername}>
+          @{toot().account.username}@{new URL(toot().account.url).hostname}
+        </span>
+        <time datetime={toot().createdAt}>
+          {formatRelative(toot().createdAt, props.now)}
+        </time>
+      </div>
+      <div
+        ref={(e: { innerHTML: string }) => {
+          appliedCustomEmoji(e, toot().content, toot().emojis);
+        }}
+        class={[tootStyle.compactTootContent].join(' ')}
+      ></div>
+    </section>
+  );
+};
+
+export default CompactToot;