RegularToot: added preview cards

src/timelines/RegularToot.tsx

@@ -5,11 +5,19 @@ import {
   type JSX,
   Show,
   createRenderEffect,
+  createSignal,
+  createEffect,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
 import Img from "../material/Img.js";
-import { Body2 } from "../material/typography.js";
+import {
+  Body1,
+  Body2,
+  Caption,
+  Subheading,
+  Title,
+} from "../material/typography.js";
 import { css } from "solid-styled";
 import {
   BookmarkAddOutlined,
@@ -26,6 +34,8 @@ import { Divider } from "@suid/material";
 import cardStyle from "../material/cards.module.css";
 import Button from "../material/Button.js";
 import MediaAttachmentGrid from "./MediaAttachmentGrid.js";
+import { FastAverageColor } from "fast-average-color";
+import Color from "colorjs.io";
 
 type TootContentViewProps = {
   source?: string;
@@ -187,6 +197,67 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
   );
 }
 
+function TootPreviewCard(props: { src: mastodon.v1.PreviewCard }) {
+  let root: HTMLAnchorElement;
+
+  createEffect(() => {
+    if (!props.src.width) return;
+    const width = root.getBoundingClientRect().width;
+    if (width > props.src.width) {
+      root.classList.add(tootStyle.compact);
+    } else {
+      root.classList.remove(tootStyle.compact);
+    }
+  });
+
+  const onImgLoad = (event: Event & { currentTarget: HTMLImageElement }) => {
+    // TODO: better extraction algorithm
+    // I'd like to use a pattern panel and match one in the panel from the extracted color
+    const fac = new FastAverageColor();
+    const result = fac.getColor(event.currentTarget);
+    if (result.error) {
+      console.error(result.error);
+      fac.destroy();
+      return;
+    }
+    root.style.setProperty("--tutu-color-surface", result.hex);
+    const focusSurface = result.isDark
+      ? new Color(result.hex).darken(0.2)
+      : new Color(result.hex).lighten(0.2);
+    root.style.setProperty("--tutu-color-surface-d", focusSurface.toString());
+    const textColor = result.isDark ? "white" : "black";
+    const secondaryTextColor = new Color(textColor);
+    secondaryTextColor.alpha = 0.75;
+    root.style.setProperty("--tutu-color-on-surface", textColor);
+    root.style.setProperty(
+      "--tutu-color-secondary-text-on-surface",
+      secondaryTextColor.toString(),
+    );
+    fac.destroy();
+  };
+
+  return (
+    <a
+      ref={root!}
+      class={tootStyle.previewCard}
+      href={props.src.url}
+      target="_blank"
+      referrerPolicy="unsafe-url"
+    >
+      <Show when={props.src.image}>
+        <img
+          crossOrigin="anonymous"
+          src={props.src.image!}
+          onLoad={onImgLoad}
+          loading="lazy"
+        />
+      </Show>
+      <Title component="h1">{props.src.title}</Title>
+      <Body1 component="p">{props.src.description}</Body1>
+    </a>
+  );
+}
+
 const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
@@ -241,6 +312,9 @@ const RegularToot: Component<TootCardProps> = (props) => {
           emojis={toot().emojis}
           class={tootStyle.tootContent}
         />
+        <Show when={toot().card}>
+          <TootPreviewCard src={toot().card!} />
+        </Show>
         <Show when={toot().mediaAttachments.length > 0}>
           <MediaAttachmentGrid attachments={toot().mediaAttachments} />
         </Show>