terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: wire public posts api

Browse Source
This commit is contained in:
TerryM
2026-05-26 12:07:13 +08:00
parent f482a2ec38
commit d3c30795dc
19 changed files with 299 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/messageStream/bubbles/AlbumBubble.tsx
View File

@@ -1,6 +1,8 @@
import { useI18n } from "../../../i18n";
import type { Attachment, Post } from "../../../types/post";
import { useLightbox } from "../overlays/ImageLightbox";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";
const MAX_VISIBLE = 4;
@@ -10,7 +12,9 @@ function imageRatio(att: Attachment) {
export function AlbumBubble({ post }: { post: Post }) {
const { openLightbox } = useLightbox();
const { lang } = useI18n();
const images = post.attachments;
const text = postDisplayText(post, lang);
const shouldMerge = images.length > MAX_VISIBLE;
if (!shouldMerge) {
@@ -20,7 +24,7 @@ export function AlbumBubble({ post }: { post: Post }) {
<button
key={att.id}
type="button"
onClick={() => openLightbox(images, i)}
onClick={() => openLightbox(images, i, text, post.id)}
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}
>
@@ -33,9 +37,9 @@ export function AlbumBubble({ post }: { post: Post }) {
/>
</button>
))}
{post.text ? (
{text ? (
<div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
{autolink(post.text)}
{autolink(text)}
</div>
) : null}
</div>
@@ -54,7 +58,7 @@ export function AlbumBubble({ post }: { post: Post }) {
<button
key={att.id}
type="button"
onClick={() => openLightbox(images, i)}
onClick={() => openLightbox(images, i, text, post.id)}
className="relative block h-full w-full overflow-hidden"
aria-label={att.filename}
>
@@ -75,9 +79,9 @@ export function AlbumBubble({ post }: { post: Post }) {
);
})}
</div>
{post.text ? (
{text ? (
<div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
{autolink(post.text)}
{autolink(text)}
</div>
) : null}
</div>

16
src/components/messageStream/bubbles/FileDocBubble.tsx
View File

@@ -1,9 +1,12 @@
import { Download } from "lucide-react";
import { postNoBody } from "../../../api";
import { useI18n } from "../../../i18n";
import type { Attachment, Post } from "../../../types/post";
import { fileIcon } from "../utils/fileIcon";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";
function AttachmentRow({ att }: { att: Attachment }) {
function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
const isImageAsDoc = att.mime.startsWith("image/");
const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
@@ -14,6 +17,9 @@ function AttachmentRow({ att }: { att: Attachment }) {
target="_blank"
rel="noopener noreferrer"
className="group flex items-center gap-2 rounded-xl px-1 py-0.5 transition hover:bg-white/5"
onClick={() => {
void postNoBody(`/api/posts/${postId}/attachments/${att.id}/download`);
}}
>
<div className="relative h-11 w-11 shrink-0 overflow-hidden rounded-full md:h-12 md:w-12">
{isImageAsDoc && att.thumbnailUrl ? (
@@ -49,14 +55,16 @@ function AttachmentRow({ att }: { att: Attachment }) {
}
export function FileDocBubble({ post }: { post: Post }) {
const { lang } = useI18n();
const text = postDisplayText(post, lang);
return (
<div className="flex flex-col gap-1">
{post.attachments.map((att) => (
<AttachmentRow key={att.id} att={att} />
<AttachmentRow key={att.id} postId={post.id} att={att} />
))}
{post.text ? (
{text ? (
<div className="mt-1 whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
{post.text}
{text}
</div>
) : null}
</div>

2
src/components/messageStream/bubbles/ImageBubble.tsx
View File

@@ -11,7 +11,7 @@ export function ImageBubble({ post }: { post: Post }) {
return (
<button
type="button"
onClick={() => openLightbox([att], 0)}
onClick={() => openLightbox([att], 0, undefined, 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]"
aria-label={att.filename}
>

10
src/components/messageStream/bubbles/ImageWithTextBubble.tsx
View File

@@ -1,10 +1,14 @@
import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { useLightbox } from "../overlays/ImageLightbox";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";
export function ImageWithTextBubble({ post }: { post: Post }) {
const { openLightbox } = useLightbox();
const { lang } = useI18n();
const att = post.attachments[0];
const text = postDisplayText(post, lang);
if (!att) return null;
const ratio =
att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
@@ -13,7 +17,7 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
<div className="flex flex-col gap-1.5">
<button
type="button"
onClick={() => openLightbox([att], 0)}
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]"
aria-label={att.filename}
>
@@ -25,9 +29,9 @@ export function ImageWithTextBubble({ post }: { post: Post }) {
style={{ aspectRatio: ratio }}
/>
</button>
{post.text ? (
{text ? (
<div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
{autolink(post.text)}
{autolink(text)}
</div>
) : null}
</div>

5
src/components/messageStream/bubbles/TextBubble.tsx
View File

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

8
src/components/messageStream/bubbles/VideoBubble.tsx
View File

@@ -1,9 +1,11 @@
import { Play } from "lucide-react";
import { useRef, useState } from "react";
import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { useVideoPlayer } from "../overlays/VideoPlayer";
import { autolink } from "../utils/autolink";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";
function formatDuration(sec: number | undefined): string {
if (!sec || sec <= 0) return "";
@@ -14,9 +16,11 @@ function formatDuration(sec: number | undefined): string {
export function VideoBubble({ post }: { post: Post }) {
const { openVideo } = useVideoPlayer();
const { lang } = useI18n();
const att = post.attachments[0];
const [playing, setPlaying] = useState(false);
const videoRef = useRef<HTMLVideoElement>(null);
const text = postDisplayText(post, lang);
if (!att) return null;
const ratio =
att.width && att.height ? `${att.width} / ${att.height}` : "16 / 9";
@@ -71,9 +75,9 @@ export function VideoBubble({ post }: { post: Post }) {
</button>
)}
</div>
{post.text ? (
{text ? (
<div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
{autolink(post.text)}
{autolink(text)}
</div>
) : null}
</div>