Merge origin/main into terry-media-adaptive-trial

Combine collapsible long-text (main) with adaptive image frame
(this branch). Resolved conflict in ImageWithTextBubble.tsx by
keeping both SingleImageFrame and CollapsibleText imports.

.gitea/workflows/deploy.yml

@@ -10,6 +10,36 @@ jobs:
     runs-on: self-hosted
 
     steps:
+      - name: Free disk space
+        run: |
+          set +e
+          echo "=== Disk before cleanup ==="
+          df -h
+          # Stale act runner workspaces from previous jobs (older than 60 min).
+          if [ -d "$HOME/.cache/act" ]; then
+            du -sh "$HOME/.cache/act" 2>/dev/null
+            find "$HOME/.cache/act" -mindepth 1 -maxdepth 1 -type d -mmin +60 -exec rm -rf {} + 2>/dev/null
+          fi
+          # Stale runner workspaces under common locations.
+          for dir in "$HOME/actions-runner/_work" "$HOME/.cache/setup-node" "$HOME/.npm/_cacache"; do
+            if [ -d "$dir" ]; then
+              find "$dir" -mindepth 1 -maxdepth 2 -mmin +1440 -exec rm -rf {} + 2>/dev/null
+            fi
+          done
+          # Docker leftovers if docker is available.
+          if command -v docker >/dev/null 2>&1; then
+            docker image prune -af --filter "until=24h" 2>/dev/null
+            docker container prune -f --filter "until=24h" 2>/dev/null
+            docker builder prune -af --filter "until=24h" 2>/dev/null
+          fi
+          # Stale /tmp files older than 2h, keep currently-running runner files.
+          find /tmp -mindepth 1 -maxdepth 1 -mmin +120 \
+            -not -name 'runner*' -not -name 'act*' \
+            -exec rm -rf {} + 2>/dev/null
+          echo "=== Disk after cleanup ==="
+          df -h
+          exit 0
+
       - name: Checkout code
         uses: actions/checkout@v4
 

src/components/messageStream/CollapsibleText.tsx

@@ -0,0 +1,127 @@
+import { AnimatePresence, m } from "framer-motion";
+import { ChevronDown } from "lucide-react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { useI18n } from "../../i18n";
+import { EASE_OUT } from "../../motion";
+
+/**
+ * Collapsible long-text container.
+ *
+ * When the rendered text overflows `collapsedLines`:
+ * 1. The text is clipped to a clean line boundary.
+ * 2. A soft gradient fade hints that more content is below.
+ * 3. A centered pill button with a chevron icon offers a clear tap target.
+ *
+ * The clipped height is `collapsedLines × computed line-height` so the cut
+ * always lands at a line boundary — no half-cut characters.
+ *
+ * Motion uses the shared `EASE_OUT` curve and respects MotionProvider's
+ * global `reducedMotion="user"`.
+ */
+export function CollapsibleText({
+  children,
+  className = "",
+  wrapperClassName = "",
+  collapsedLines = 8,
+}: {
+  children: ReactNode;
+  /** Typography classes applied to the text container. */
+  className?: string;
+  /** Outer wrapper classes (padding, etc.). */
+  wrapperClassName?: string;
+  collapsedLines?: number;
+}) {
+  const { t } = useI18n();
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [clampedHeight, setClampedHeight] = useState(0);
+  const [fullHeight, setFullHeight] = useState(0);
+  const [needsToggle, setNeedsToggle] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+
+  const measure = () => {
+    const el = innerRef.current;
+    if (!el) return;
+    const lh = parseFloat(getComputedStyle(el).lineHeight) || 24;
+    const ch = Math.round(lh * collapsedLines);
+    const fh = el.scrollHeight;
+    setClampedHeight(ch);
+    setFullHeight(fh);
+    setNeedsToggle(fh > ch + 4);
+  };
+
+  useLayoutEffect(() => {
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(measure);
+    if (innerRef.current) ro.observe(innerRef.current);
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children, collapsedLines]);
+
+  useEffect(() => {
+    const id = window.requestAnimationFrame(measure);
+    return () => window.cancelAnimationFrame(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [children, collapsedLines]);
+
+  const isClamped = needsToggle && !expanded;
+  const targetHeight = needsToggle
+    ? expanded
+      ? fullHeight
+      : clampedHeight
+    : undefined;
+
+  return (
+    <div className={wrapperClassName}>
+      <m.div
+        className="relative overflow-hidden"
+        animate={{ height: targetHeight }}
+        transition={{ duration: 0.3, ease: EASE_OUT }}
+        style={needsToggle ? undefined : { height: "auto" }}
+      >
+        <div ref={innerRef} className={className}>
+          {children}
+        </div>
+
+        {/* Soft fade hints "more content below" when clamped. */}
+        <AnimatePresence>
+          {isClamped ? (
+            <m.div
+              key="fade"
+              aria-hidden
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2, ease: EASE_OUT }}
+              className="pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-[#272632] via-[#272632]/85 to-transparent"
+            />
+          ) : null}
+        </AnimatePresence>
+      </m.div>
+
+      {needsToggle ? (
+        <button
+          type="button"
+          onClick={() => setExpanded((v) => !v)}
+          aria-expanded={expanded}
+          className="group mt-1.5 inline-flex h-8 items-center gap-1 text-[13px] font-medium text-ark-gold transition-colors duration-200 hover:text-ark-gold2"
+        >
+          <span>{expanded ? t("showLess") : t("showMore")}</span>
+          <m.span
+            className="inline-flex"
+            animate={{ rotate: expanded ? 180 : 0 }}
+            transition={{ duration: 0.25, ease: EASE_OUT }}
+          >
+            <ChevronDown className="h-4 w-4" strokeWidth={2.2} />
+          </m.span>
+        </button>
+      ) : null}
+    </div>
+  );
+}

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -8,6 +8,7 @@ import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
 import { computeAlbumLayout } from "../utils/albumLayout";
 import { postDisplayText } from "../utils/postText";
+import { CollapsibleText } from "../CollapsibleText";
 
 const MAX_VISIBLE = 4;
 
@@ -82,9 +83,12 @@ export function AlbumBubble({ post }: { post: Post }) {
         })}
       </div>
       {text ? (
-        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
+        <CollapsibleText
+          wrapperClassName="px-4 pt-3"
+          className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
+        >
           {autolink(text)}
-        </div>
+        </CollapsibleText>
       ) : null}
     </div>
   );

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -11,6 +11,7 @@ import {
 } from "../utils/filenameDisplay";
 import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
+import { CollapsibleText } from "../CollapsibleText";
 import { useToast } from "../../Toast";
 
 function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
@@ -97,9 +98,9 @@ export function FileDocBubble({ post }: { post: Post }) {
         <AttachmentRow key={att.id} postId={post.id} att={att} />
       ))}
       {text ? (
-        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
+        <CollapsibleText className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[15px] font-medium leading-6 text-neutral-100">
           {text}
-        </div>
+        </CollapsibleText>
       ) : null}
     </div>
   );

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -2,6 +2,7 @@ import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
+import { CollapsibleText } from "../CollapsibleText";
 import { SingleImageFrame } from "./SingleImageFrame";
 
 export function ImageWithTextBubble({ post }: { post: Post }) {
@@ -13,9 +14,12 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
     <div className="flex flex-col">
       <SingleImageFrame postId={post.id} attachment={att} text={text} />
       {text ? (
-        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
+        <CollapsibleText
+          wrapperClassName="px-4 pt-3"
+          className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
+        >
           {autolink(text)}
-        </div>
+        </CollapsibleText>
       ) : null}
     </div>
   );

src/components/messageStream/bubbles/TextBubble.tsx

@@ -2,12 +2,13 @@ import type { Post } from "../../../types/post";
 import { useI18n } from "../../../i18n";
 import { autolink } from "../utils/autolink";
 import { postDisplayText } from "../utils/postText";
+import { CollapsibleText } from "../CollapsibleText";
 
 export function TextBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
   return (
-    <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+    <CollapsibleText className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
       {autolink(postDisplayText(post, lang))}
-    </div>
+    </CollapsibleText>
   );
 }

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -7,6 +7,7 @@ import type { Attachment, Post } from "../../../types/post";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { useVideoPlayer } from "../overlays/VideoPlayer";
 import { autolink } from "../utils/autolink";
+import { CollapsibleText } from "../CollapsibleText";
 import { downloadAttachment } from "../utils/downloadFile";
 import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
@@ -355,9 +356,12 @@ export function VideoBubble({ post }: { post: Post }) {
           })}
         </div>
         {text ? (
-          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
+          <CollapsibleText
+            wrapperClassName="px-4 pt-3"
+            className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
+          >
             {autolink(text)}
-          </div>
+          </CollapsibleText>
         ) : null}
         {listOpen ? (
           <VideoListDialog
@@ -378,9 +382,12 @@ export function VideoBubble({ post }: { post: Post }) {
     <div className="flex flex-col">
       <VideoAttachmentCard postId={post.id} attachment={videos[0]} />
       {text ? (
-        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
+        <CollapsibleText
+          wrapperClassName="px-4 pt-3"
+          className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
+        >
           {autolink(text)}
-        </div>
+        </CollapsibleText>
       ) : null}
     </div>
   );

src/i18n.tsx

@@ -45,6 +45,8 @@ const zhDict: Dict = {
   downloading: "下载中…",
   downloadOk: "下载完成",
   downloadFail: "下载失败，请重试",
+  showMore: "展开全部",
+  showLess: "收起全部",
   share: "分享",
   langLabel: "语言",
   admin: "后台",
@@ -175,6 +177,8 @@ const enDict: Dict = {
   downloading: "Downloading…",
   downloadOk: "Download complete",
   downloadFail: "Download failed, please retry",
+  showMore: "Show all",
+  showLess: "Show less",
   share: "Share",
   langLabel: "Language",
   admin: "Admin",
@@ -291,6 +295,8 @@ const languageNames: Record<Lang, Dict> = {
   },
   ja: {
     brand: "ARK ライブラリー",
+    showMore: "すべて表示",
+    showLess: "閉じる",
     lang_zh_CN: "中国語",
     lang_en: "英語",
     lang_ja: "日本語",
@@ -301,6 +307,8 @@ const languageNames: Record<Lang, Dict> = {
   },
   ko: {
     brand: "ARK 라이브러리",
+    showMore: "모두 보기",
+    showLess: "접기",
     lang_zh_CN: "중국어",
     lang_en: "영어",
     lang_ja: "일본어",
@@ -311,6 +319,8 @@ const languageNames: Record<Lang, Dict> = {
   },
   vi: {
     brand: "Thư viện ARK",
+    showMore: "Xem tất cả",
+    showLess: "Thu gọn",
     lang_zh_CN: "Tiếng Trung",
     lang_en: "Tiếng Anh",
     lang_ja: "Tiếng Nhật",
@@ -321,6 +331,8 @@ const languageNames: Record<Lang, Dict> = {
   },
   id: {
     brand: "Perpustakaan ARK",
+    showMore: "Lihat semua",
+    showLess: "Tutup",
     lang_zh_CN: "Bahasa Tionghoa",
     lang_en: "Bahasa Inggris",
     lang_ja: "Bahasa Jepang",
@@ -331,6 +343,8 @@ const languageNames: Record<Lang, Dict> = {
   },
   ms: {
     brand: "Perpustakaan ARK",
+    showMore: "Lihat semua",
+    showLess: "Tutup",
     lang_zh_CN: "Bahasa Cina",
     lang_en: "Bahasa Inggeris",
     lang_ja: "Bahasa Jepun",