feat: enable real posts api by default

src/components/messageStream/bubbles/ImageWithTextBubble.tsx

@@ -14,24 +14,26 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
     att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
 
   return (
-    <div className="flex flex-col gap-1.5">
+    <div className="relative overflow-hidden rounded-xl bg-black/20">
       <button
         type="button"
         onClick={() => openLightbox([att], 0, text, post.id)}
-        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]"
+        className="block w-full"
         aria-label={att.filename}
       >
         <img
           src={att.url}
           alt={att.filename}
           loading="lazy"
-          className="h-full w-full object-cover"
+          className="block h-auto w-full"
           style={{ aspectRatio: ratio }}
         />
       </button>
       {text ? (
-        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
-          {autolink(text)}
+        <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/85 via-black/55 to-transparent px-4 pb-4 pt-16 text-[14px] leading-snug text-neutral-100">
+          <div className="whitespace-pre-wrap break-words">
+            {autolink(text)}
+          </div>
         </div>
       ) : null}
     </div>

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,5 +1,6 @@
-import { Play } from "lucide-react";
+import { Download, Play } from "lucide-react";
 import { useRef, useState } from "react";
+import { postNoBody } from "../../../api";
 import { useI18n } from "../../../i18n";
 import type { Post } from "../../../types/post";
 import { useVideoPlayer } from "../overlays/VideoPlayer";
@@ -24,6 +25,8 @@ export function VideoBubble({ post }: { post: Post }) {
   if (!att) return null;
   const ratio =
     att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
+  const posterUrl = att.posterUrl ?? att.thumbnailUrl;
+  const previewVideoUrl = att.url.includes("#") ? att.url : `${att.url}#t=0.1`;
 
   return (
     <div className="flex flex-col gap-1.5">
@@ -48,31 +51,64 @@ export function VideoBubble({ post }: { post: Post }) {
             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 ? (
+          <>
+            {posterUrl ? (
               <img
-                src={att.posterUrl}
+                src={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>
+            ) : (
+              <video
+                src={previewVideoUrl}
+                preload="metadata"
+                muted
+                playsInline
+                className="absolute inset-0 h-full w-full object-cover"
+                aria-hidden="true"
+              />
+            )}
+            <div className="absolute left-3 top-3 z-10 flex items-center gap-1.5 text-xs text-white">
+              <a
+                href={att.url}
+                download={att.filename}
+                target="_blank"
+                rel="noreferrer"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  void postNoBody(
+                    `/api/posts/${post.id}/attachments/${att.id}/download`,
+                  );
+                }}
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur transition hover:bg-black/75"
+                aria-label={`Download ${att.filename}`}
+              >
+                <Download className="h-4 w-4" />
+              </a>
+              <div className="flex items-center gap-1.5 rounded-full bg-black/55 px-2.5 py-1.5">
+                {formatDuration(att.durationSec) ? (
+                  <>
+                    <span>{formatDuration(att.durationSec)}</span>
+                    <span className="opacity-70">·</span>
+                  </>
+                ) : null}
+                <span>{formatBytes(att.sizeBytes)}</span>
+              </div>
             </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>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setPlaying(true);
+              }}
+              className="absolute inset-0 flex items-center justify-center"
+              aria-label="Play video"
+            >
+              <span 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" />
+              </span>
+            </button>
+          </>
         )}
       </div>
       {text ? (