feat: add telegram-style resource stream

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -0,0 +1,85 @@
+import type { Attachment, Post } from "../../../types/post";
+import { useLightbox } from "../overlays/ImageLightbox";
+import { autolink } from "../utils/autolink";
+
+const MAX_VISIBLE = 4;
+
+function imageRatio(att: Attachment) {
+  return att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
+}
+
+export function AlbumBubble({ post }: { post: Post }) {
+  const { openLightbox } = useLightbox();
+  const images = post.attachments;
+  const shouldMerge = images.length > MAX_VISIBLE;
+
+  if (!shouldMerge) {
+    return (
+      <div className="flex flex-col gap-1.5">
+        {images.map((att, i) => (
+          <button
+            key={att.id}
+            type="button"
+            onClick={() => openLightbox(images, i)}
+            className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
+            aria-label={att.filename}
+          >
+            <img
+              src={att.url}
+              alt={att.filename}
+              loading="lazy"
+              className="h-full w-full object-cover"
+              style={{ aspectRatio: imageRatio(att) }}
+            />
+          </button>
+        ))}
+        {post.text ? (
+          <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+            {autolink(post.text)}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  const visible = images.slice(0, MAX_VISIBLE);
+  const extra = images.length - MAX_VISIBLE;
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="grid h-[220px] grid-cols-2 grid-rows-2 gap-[2px] overflow-hidden rounded-xl min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
+        {visible.map((att, i) => {
+          const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
+          return (
+            <button
+              key={att.id}
+              type="button"
+              onClick={() => openLightbox(images, i)}
+              className="relative block h-full w-full overflow-hidden"
+              aria-label={att.filename}
+            >
+              <img
+                src={att.thumbnailUrl ?? att.url}
+                alt={att.filename}
+                loading="lazy"
+                className={`h-full w-full object-cover ${
+                  isLastSlot ? "blur-sm scale-105" : ""
+                }`}
+              />
+              {isLastSlot ? (
+                <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white">
+                  +{extra}
+                </div>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/messageStream/bubbles/FileDocBubble.tsx

@@ -0,0 +1,64 @@
+import { Download } from "lucide-react";
+import type { Attachment, Post } from "../../../types/post";
+import { fileIcon } from "../utils/fileIcon";
+import { formatBytes } from "../utils/formatBytes";
+
+function AttachmentRow({ att }: { att: Attachment }) {
+  const isImageAsDoc = att.mime.startsWith("image/");
+  const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
+
+  return (
+    <a
+      href={att.url}
+      download={att.filename}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5"
+    >
+      <div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12">
+        {isImageAsDoc && att.thumbnailUrl ? (
+          <>
+            <img
+              src={att.thumbnailUrl}
+              alt=""
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+            <div className="absolute inset-0 flex items-center justify-center bg-black/35">
+              <Download className="h-4 w-4 text-white" />
+            </div>
+          </>
+        ) : (
+          <div
+            className="flex h-full w-full items-center justify-center"
+            style={{ backgroundColor: color }}
+          >
+            <Icon className="h-5 w-5 text-white" strokeWidth={2.2} />
+          </div>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[14px] font-medium text-ark-gold2 group-hover:text-ark-gold">
+          {att.filename}
+        </div>
+        <div className="text-[11px] text-neutral-400">
+          {formatBytes(att.sizeBytes)}
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export function FileDocBubble({ post }: { post: Post }) {
+  return (
+    <div className="flex flex-col gap-1">
+      {post.attachments.map((att) => (
+        <AttachmentRow key={att.id} att={att} />
+      ))}
+      {post.text ? (
+        <div className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {post.text}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/messageStream/bubbles/ImageBubble.tsx

@@ -0,0 +1,27 @@
+import type { Post } from "../../../types/post";
+import { useLightbox } from "../overlays/ImageLightbox";
+
+export function ImageBubble({ post }: { post: Post }) {
+  const { openLightbox } = useLightbox();
+  const att = post.attachments[0];
+  if (!att) return null;
+  const ratio =
+    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
+
+  return (
+    <button
+      type="button"
+      onClick={() => openLightbox([att], 0)}
+      className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
+      aria-label={att.filename}
+    >
+      <img
+        src={att.url}
+        alt={att.filename}
+        loading="lazy"
+        className="h-full w-full object-cover"
+        style={{ aspectRatio: ratio }}
+      />
+    </button>
+  );
+}

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -0,0 +1,35 @@
+import type { Post } from "../../../types/post";
+import { useLightbox } from "../overlays/ImageLightbox";
+import { autolink } from "../utils/autolink";
+
+export function ImageWithTextBubble({ post }: { post: Post }) {
+  const { openLightbox } = useLightbox();
+  const att = post.attachments[0];
+  if (!att) return null;
+  const ratio =
+    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <button
+        type="button"
+        onClick={() => openLightbox([att], 0)}
+        className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
+        aria-label={att.filename}
+      >
+        <img
+          src={att.url}
+          alt={att.filename}
+          loading="lazy"
+          className="h-full w-full object-cover"
+          style={{ aspectRatio: ratio }}
+        />
+      </button>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/messageStream/bubbles/TextBubble.tsx

@@ -0,0 +1,10 @@
+import type { Post } from "../../../types/post";
+import { autolink } from "../utils/autolink";
+
+export function TextBubble({ post }: { post: Post }) {
+  return (
+    <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+      {autolink(post.text ?? "")}
+    </div>
+  );
+}

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -0,0 +1,81 @@
+import { Play } from "lucide-react";
+import { useRef, useState } from "react";
+import type { Post } from "../../../types/post";
+import { useVideoPlayer } from "../overlays/VideoPlayer";
+import { autolink } from "../utils/autolink";
+import { formatBytes } from "../utils/formatBytes";
+
+function formatDuration(sec: number | undefined): string {
+  if (!sec || sec <= 0) return "";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export function VideoBubble({ post }: { post: Post }) {
+  const { openVideo } = useVideoPlayer();
+  const att = post.attachments[0];
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  if (!att) return null;
+  const ratio =
+    att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div
+        className="relative max-h-[220px] w-full overflow-hidden rounded-xl bg-black min-[440px]:max-h-[250px] md:max-h-[300px] lg:max-h-[340px]"
+        style={{ aspectRatio: ratio }}
+        onClick={() => {
+          if (playing) {
+            const v = videoRef.current;
+            openVideo(att, v?.currentTime ?? 0);
+          }
+        }}
+      >
+        {playing ? (
+          <video
+            ref={videoRef}
+            src={att.url}
+            poster={att.posterUrl}
+            controls
+            playsInline
+            autoPlay
+            className="absolute inset-0 h-full w-full"
+          />
+        ) : (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              setPlaying(true);
+            }}
+            className="absolute inset-0 flex items-center justify-center"
+            aria-label="Play video"
+          >
+            {att.posterUrl ? (
+              <img
+                src={att.posterUrl}
+                alt=""
+                className="absolute inset-0 h-full w-full object-cover"
+              />
+            ) : null}
+            <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1 text-xs text-white">
+              <span>{formatDuration(att.durationSec)}</span>
+              <span className="opacity-70">·</span>
+              <span>{formatBytes(att.sizeBytes)}</span>
+            </div>
+            <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-black/55 text-white backdrop-blur md:h-14 md:w-14">
+              <Play className="h-5 w-5 translate-x-0.5 fill-white md:h-6 md:w-6" />
+            </div>
+          </button>
+        )}
+      </div>
+      {post.text ? (
+        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
+          {autolink(post.text)}
+        </div>
+      ) : null}
+    </div>
+  );
+}