PreviewCard: move to sparated files

src/timelines/RegularToot.tsx

@@ -5,13 +5,11 @@ import {
   type JSX,
   Show,
   createRenderEffect,
-  createEffect,
-  createMemo,
 } from "solid-js";
 import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
 import Img from "../material/Img.js";
-import { Body1, Body2, Title } from "../material/typography.js";
+import { Body2 } from "../material/typography.js";
 import { css } from "solid-styled";
 import {
   BookmarkAddOutlined,
@@ -30,13 +28,12 @@ import { Divider } from "@suid/material";
 import cardStyle from "../material/cards.module.css";
 import Button from "../material/Button.js";
 import MediaAttachmentGrid from "./MediaAttachmentGrid.js";
-import Color from "colorjs.io";
 import { useDateFnLocale } from "../platform/i18n";
 import { canShare, share } from "../platform/share";
 import { makeAcctText, useDefaultSession } from "../masto/clients";
 import TootContent from "./toot-components/TootContent";
 import BoostIcon from "./toot-components/BoostIcon";
-import { averageColorHex } from "../platform/blurhash";
+import PreviewCard from "./toot-components/PreviewCard";
 
 type TootActionGroupProps<T extends mastodon.v1.Status> = {
   onRetoot?: (value: T) => void;
@@ -186,95 +183,6 @@ function TootAuthorGroup(
   );
 }
 
-export function TootPreviewCard(props: {
-  src: mastodon.v1.PreviewCard;
-  alwaysCompact?: boolean;
-}) {
-  let root: HTMLAnchorElement;
-
-  createEffect(() => {
-    if (props.alwaysCompact) {
-      root.classList.add(tootStyle.compact);
-      return;
-    }
-    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 imgAverageColor = createMemo(() => {
-    if (!props.src.image) return;
-    return new Color(averageColorHex(props.src.blurhash));
-  });
-
-  const prefersWhiteText = createMemo(() => {
-    const oc = imgAverageColor();
-    if (!oc) return;
-    const colorWhite = new Color("white");
-
-    return colorWhite.luminance / oc.luminance > 3.5;
-  });
-
-  const focusSurfaceColor = createMemo(() => {
-    const oc = imgAverageColor();
-    if (!oc) return;
-    if (prefersWhiteText()) {
-      return new Color(oc).darken(0.2);
-    } else {
-      return new Color(oc).lighten(0.2);
-    }
-  });
-
-  const textColorName = createMemo(() => {
-    const useWhiteText = prefersWhiteText();
-    if (typeof useWhiteText === "undefined") {
-      return;
-    }
-    return useWhiteText ? "white" : "black";
-  });
-
-  const secondaryTextColor = createMemo(() => {
-    const tcn = textColorName();
-    if (!tcn) return;
-    const tc = new Color(tcn);
-    tc.alpha = 0.75;
-    return tc;
-  });
-
-  return (
-    <a
-      ref={root!}
-      class={tootStyle.previewCard}
-      href={props.src.url}
-      target="_blank"
-      referrerPolicy="unsafe-url"
-      style={{
-        "--tutu-color-surface": imgAverageColor()?.toString(),
-        "--tutu-color-surface-d": focusSurfaceColor()?.toString(),
-        "--tutu-color-on-surface": textColorName(),
-        "--tutu-color-secondary-text-on-surface":
-          secondaryTextColor()?.toString(),
-      }}
-    >
-      <Show when={props.src.image}>
-        <img
-          crossOrigin="anonymous"
-          src={props.src.image!}
-          width={props.src.width || undefined}
-          height={props.src.height || undefined}
-          loading="lazy"
-        />
-      </Show>
-      <Title component="h1">{props.src.title}</Title>
-      <Body1 component="p">{props.src.description}</Body1>
-    </a>
-  );
-}
-
 /**
  * find bottom-to-top the element with `data-action`.
  */
@@ -420,7 +328,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
           class={tootStyle.tootContent}
         />
         <Show when={toot().card}>
-          <TootPreviewCard src={toot().card!} />
+          <PreviewCard src={toot().card!} />
         </Show>
         <Show when={toot().mediaAttachments.length > 0}>
           <MediaAttachmentGrid attachments={toot().mediaAttachments} />