src/settings/Language.tsx

@@ -29,7 +29,7 @@ import { useNavigator } from "../platform/StackedRouter";
 const ChooseLang: Component = () => {
   const { pop } = useNavigator();
   const [t] = createTranslator(
-    () => import("./i18n/generic.json"),
+    () => import("./i18n/lang-names.json"),
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
         default: Record<string, string | undefined> & {

src/settings/Region.tsx

@@ -27,7 +27,7 @@ import { useNavigator } from "../platform/StackedRouter";
 const ChooseRegion: Component = () => {
   const {pop} = useNavigator();
   const [t] = createTranslator(
-    () => import("./i18n/generic.json"),
+    () => import("./i18n/lang-names.json"),
     (code) =>
       import(`./i18n/${code}.json`) as Promise<{
         default: Record<string, string | undefined> & {

src/settings/Settings.tsx

@@ -161,7 +161,7 @@ const Settings: Component = () => {
       import(`./i18n/${code}.json`) as Promise<{
         default: Strings;
       }>,
-    () => import(`./i18n/generic.json`),
+    () => import(`./i18n/lang-names.json`),
   );
   const { pop } = useNavigator();
   const settings$ = useStore($settings);

src/timelines/RegularToot.tsx

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

src/timelines/toot-components/TootContent.css

@@ -1,29 +0,0 @@
-.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,7 +8,6 @@ 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();
@@ -20,14 +19,9 @@ export type TootContentProps = {
   mentions: mastodon.v1.StatusMention[];
 } & JSX.HTMLAttributes<HTMLDivElement>;
 
-const TootContent: Component<TootContentProps> = (oprops) => {
+const TootContent: Component<TootContentProps> = (props) => {
   const session = useDefaultSession();
-  const [props, rest] = splitProps(oprops, [
+  const [managed, rest] = splitProps(props, ["source", "emojis", "mentions"]);
-    "source",
-    "emojis",
-    "mentions",
-    "class",
-  ]);
 
   const clientFinder = createMemo(() =>
     session() ? makeAcctText(session()!) : undefined,
@@ -37,10 +31,10 @@ const TootContent: Component<TootContentProps> = (oprops) => {
     <div
       ref={(ref) => {
         createRenderEffect(() => {
-          ref.innerHTML = props.source
+          ref.innerHTML = managed.source
-            ? props.emojis
+            ? managed.emojis
-              ? resolveCustomEmoji(props.source, props.emojis)
+              ? resolveCustomEmoji(managed.source, managed.emojis)
-              : props.source
+              : managed.source
             : "";
         });
 
@@ -59,7 +53,6 @@ const TootContent: Component<TootContentProps> = (oprops) => {
           }
         });
       }}
-      class={`TootContent ${props.class || ""}`}
       {...rest}
     ></div>
   );

src/timelines/toot.module.css

@@ -10,9 +10,9 @@
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
     transition:
-      margin-top 60ms var(--tutu-anim-curve-sharp),
+      margin-top 125ms var(--tutu-anim-curve-std),
-      margin-bottom 60ms var(--tutu-anim-curve-sharp),
+      margin-bottom 125ms var(--tutu-anim-curve-std),
-      height 60ms var(--tutu-anim-curve-sharp),
+      height 225ms var(--tutu-anim-curve-std),
       var(--tutu-transition-shadow);
     border-radius: 0;
   }
@@ -89,6 +89,103 @@
   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;
@@ -124,6 +221,12 @@
   }
 }
 
+.compactTootContent {
+  composes: tootContent;
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .tootRetootGrp {
   display: flex;
   gap: 0.25em;