TootContent: remove css modules

src/timelines/RegularToot.tsx

@@ -325,7 +325,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
           source={toot().content}
           emojis={toot().emojis}
           mentions={toot().mentions}
-          class={tootStyle.tootContent}
+          class={cardStyle.cardNoPad}
         />
         <Show when={toot().card}>
           <PreviewCard src={toot().card!} />

src/timelines/toot-components/TootContent.css

@@ -0,0 +1,29 @@
+.TootContent {
+  composes: cardNoPad from "../material/cards.module.css";
+  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
+  margin-right: var(--card-pad, 0);
+  line-height: 1.5;
+
+  & * {
+    user-select: text;
+  }
+
+  & a {
+    color: var(--tutu-color-primary-d);
+  }
+
+  & a[target="_blank"] {
+    word-break: break-all;
+
+    >.invisible {
+      display: none;
+    }
+
+    >.ellipsis {
+      &::after {
+        display: inline;
+        content: "...";
+      }
+    }
+  }
+}

src/timelines/toot-components/TootContent.tsx

@@ -8,6 +8,7 @@ import {
 } from "solid-js";
 import { resolveCustomEmoji } from "../../masto/toot.js";
 import { makeAcctText, useDefaultSession } from "../../masto/clients";
+import "./TootContent.css";
 
 function preventDefault(event: Event) {
   event.preventDefault();
@@ -19,9 +20,14 @@ export type TootContentProps = {
   mentions: mastodon.v1.StatusMention[];
 } & JSX.HTMLAttributes<HTMLDivElement>;
 
-const TootContent: Component<TootContentProps> = (props) => {
+const TootContent: Component<TootContentProps> = (oprops) => {
   const session = useDefaultSession();
-  const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);
+  const [props, rest] = splitProps(oprops, [
+    "source",
+    "emojis",
+    "mentions",
+    "class",
+  ]);
 
   const clientFinder = createMemo(() =>
     session() ? makeAcctText(session()!) : undefined,
@@ -31,10 +37,10 @@ const TootContent: Component<TootContentProps> = (props) => {
     <div
       ref={(ref) => {
         createRenderEffect(() => {
-          ref.innerHTML = managed.source
-            ? managed.emojis
-              ? resolveCustomEmoji(managed.source, managed.emojis)
-              : managed.source
+          ref.innerHTML = props.source
+            ? props.emojis
+              ? resolveCustomEmoji(props.source, props.emojis)
+              : props.source
             : "";
         });
 
@@ -53,9 +59,10 @@ const TootContent: Component<TootContentProps> = (props) => {
           }
         });
       }}
+      class={`TootContent ${props.class || ""}`}
       {...rest}
     ></div>
   );
 };
 
-export default TootContent;
+export default TootContent;

src/timelines/toot.module.css

@@ -89,103 +89,6 @@
   background-color: var(--tutu-color-surface-d);
 }
 
-.tootContent {
-  composes: cardNoPad from "../material/cards.module.css";
-  margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
-  margin-right: var(--card-pad, 0);
-  line-height: 1.5;
-
-  & * {
-    user-select: text;
-  }
-
-  & a {
-    color: var(--tutu-color-primary-d);
-  }
-
-  & :global(a[target="_blank"]) {
-    > :global(.invisible) {
-      display: none;
-    }
-
-    > :global(.ellipsis) {
-      &::after {
-        display: inline;
-        content: "...";
-      }
-    }
-  }
-}
-
-.previewCard {
-  composes: cardGutSkip from "../material/cards.module.css";
-  display: block;
-  border: 1px solid #eeeeee;
-  background-color: var(--tutu-color-surface);
-  text-decoration: none;
-  border-radius: 4px;
-  overflow: hidden;
-  margin-top: 1em;
-  margin-bottom: 1.5em;
-  color: var(--tutu-color-secondary-text-on-surface);
-  transition: color 220ms var(--tutu-anim-curve-std), background-color 220ms var(--tutu-anim-curve-std);
-  padding-bottom: 8px;
-  overflow: hidden;
-  z-index: 1;
-  position: relative;
-
-  >img {
-    background-color: #eeeeee;
-    max-width: 100%;
-    height: auto;
-  }
-
-  &:hover,
-  &:focus-visible {
-    background-color: var(--tutu-color-surface-d);
-    color: var(--tutu-color-on-surface);
-
-    >h1 {
-      text-decoration: underline;
-    }
-  }
-
-  >h1 {
-    color: var(--tutu-color-on-surface);
-    max-height: calc(4 * var(--title-line-height) * var(--title-size));
-  }
-
-  >p {
-    max-height: calc(8 * var(--body-line-height) * var(--body-size));
-  }
-
-  >h1,
-  >p {
-    margin-left: 16px;
-    margin-right: 16px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  &.compact {
-    display: grid;
-    grid-template-columns: minmax(10%, 30%) 1fr;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-top: 8px;
-
-    >img:first-child {
-      grid-row: 1 / 3;
-      object-fit: contain;
-    }
-
-    >h1,
-    >p {
-      margin-right: 0;
-    }
-  }
-}
-
 .toot.compact {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -221,12 +124,6 @@
   }
 }
 
-.compactTootContent {
-  composes: tootContent;
-  margin-left: 0;
-  margin-right: 0;
-}
-
 .tootRetootGrp {
   display: flex;
   gap: 0.25em;