RegularToot: remove css module

src/timelines/RegularToot.tsx

@@ -14,11 +14,7 @@ import tootStyle from "./toot.module.css";
 import { formatRelative } from "date-fns";
 import Img from "~material/Img.js";
 import { Body2 } from "~material/typography.js";
-import { css } from "solid-styled";
-import {
-  SmartToySharp,
-  Lock,
-} from "@suid/icons-material";
+import { SmartToySharp, Lock } from "@suid/icons-material";
 import { useTimeSource } from "~platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
 import { Divider } from "@suid/material";
@@ -30,7 +26,8 @@ import TootContent from "./toots/TootContent";
 import BoostIcon from "./toots/BoostIcon";
 import PreviewCard from "./toots/PreviewCard";
 import TootPoll from "./toots/TootPoll";
-import TootActionGroup from "./toots/TootActionGroup.js"
+import TootActionGroup from "./toots/TootActionGroup.js";
+import "./RegularToot.css";
 
 export type TootEnv = {
   boost: (value: mastodon.v1.Status) => void;
@@ -178,9 +175,9 @@ function onToggleReveal(setValue: Setter<boolean>, event: Event) {
  * You can extract the intent from the attributes of the "actionable" element.
  * The action type is the dataset's `action`.
  */
-const RegularToot: Component<RegularTootProps> = (props) => {
+const RegularToot: Component<RegularTootProps> = (oprops) => {
   let rootRef: HTMLElement;
-  const [managed, rest] = splitProps(props, [
+  const [props, rest] = splitProps(oprops, [
     "status",
     "lang",
     "class",
@@ -189,71 +186,28 @@ const RegularToot: Component<RegularTootProps> = (props) => {
     "thread",
   ]);
   const now = useTimeSource();
-  const status = () => managed.status;
+  const status = () => props.status;
   const toot = () => status().reblog ?? status();
   const session = useDefaultSession();
   const [reveal, setReveal] = createSignal(false);
 
-  css`
-    .reply-sep {
-      margin-left: calc(var(--toot-avatar-size) + var(--card-pad) + 8px);
-      margin-block: 8px;
-    }
-
-    .thread-top,
-    .thread-mid,
-    .thread-btm {
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        left: 36px;
-        background-color: var(--tutu-color-secondary);
-        width: 2px;
-        display: block;
-      }
-    }
-
-    .thread-mid {
-      &::before {
-        top: 0;
-        bottom: 0;
-      }
-    }
-
-    .thread-top {
-      &::before {
-        top: 16px;
-        bottom: 0;
-      }
-    }
-
-    .thread-btm {
-      &::before {
-        top: 0;
-        height: 16px;
-      }
-    }
-  `;
-
   return (
     <>
       <article
         classList={{
-          [tootStyle.toot]: true,
-          [tootStyle.expanded]: managed.evaluated,
-          "thread-top": managed.thread === "top",
-          "thread-mid": managed.thread === "middle",
-          "thread-btm": managed.thread === "bottom",
-          [managed.class || ""]: true,
+          "RegularToot": true,
+          "expanded": props.evaluated,
+          "thread-top": props.thread === "top",
+          "thread-mid": props.thread === "middle",
+          "thread-btm": props.thread === "bottom",
+          [props.class || ""]: true,
         }}
         ref={rootRef!}
-        lang={toot().language || managed.lang}
+        lang={toot().language || props.lang}
         {...rest}
       >
         <Show when={!!status().reblog}>
-          <div class={tootStyle.tootRetootGrp}>
+          <div class="retoot-grp">
             <BoostIcon />
             <Body2
               ref={(e: { innerHTML: string }) => {
@@ -301,7 +255,7 @@ const RegularToot: Component<RegularTootProps> = (props) => {
         <Show when={toot().poll}>
           <TootPoll value={toot().poll!} status={toot()} />
         </Show>
-        <Show when={managed.actionable}>
+        <Show when={props.actionable}>
           <Divider
             class={cardStyle.cardNoPad}
             style={{ "margin-top": "8px" }}