Files
wehub-resource-sync e4dcfc49aa
Tests / Import Check (Python 3.13) (push) Has been cancelled
Tests / Import Check (Python 3.14) (push) Has been cancelled
Tests / Python Tests (Python 3.11) (push) Has been cancelled
Tests / Python Tests (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.14) (push) Has been cancelled
Tests / Test Summary (push) Has been cancelled
Tests / Lint and Format (push) Has been cancelled
Tests / Web Node Tests (push) Has been cancelled
Tests / Import Check (Python 3.11) (push) Has been cancelled
Tests / Import Check (Python 3.12) (push) Has been cancelled
Tests / Python Tests (Python 3.13) (push) Has been cancelled
chore: import upstream snapshot with attribution
2026-07-13 13:00:43 +08:00

91 lines
2.6 KiB
TypeScript

"use client";
import Link from "next/link";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { apiFetch, apiUrl } from "@/lib/api";
import { formatRelativeTime } from "@/lib/relative-time";
interface RecentBook {
id: string;
title: string;
status: string;
chapter_count: number;
page_count: number;
updated_at: number;
}
const STATUS_DOT: Record<string, string> = {
ready: "bg-emerald-400",
partial: "bg-amber-400",
generating: "bg-sky-400",
planning: "bg-sky-400",
pending: "bg-[var(--muted-foreground)]/30",
draft: "bg-[var(--muted-foreground)]/30",
spine_ready: "bg-violet-400",
error: "bg-rose-400",
};
interface BookRecentProps {
collapsed?: boolean;
limit?: number;
}
export function BookRecent({ collapsed = false, limit = 4 }: BookRecentProps) {
const { i18n } = useTranslation();
const [books, setBooks] = useState<RecentBook[]>([]);
useEffect(() => {
let cancelled = false;
(async () => {
try {
const res = await apiFetch(apiUrl("/api/v1/book/books"));
if (!res.ok) return;
const data = await res.json();
const items: RecentBook[] = Array.isArray(data?.books)
? data.books
: [];
items.sort(
(a, b) => (Number(b.updated_at) || 0) - (Number(a.updated_at) || 0),
);
if (!cancelled) setBooks(items.slice(0, limit));
} catch {
/* ignore */
}
})();
return () => {
cancelled = true;
};
}, [limit]);
if (books.length === 0) return null;
if (collapsed) return null;
return (
<div className="ml-5 border-l border-[var(--border)]/30 py-1">
{books.map((book) => {
const dot =
STATUS_DOT[book.status] || "bg-[var(--muted-foreground)]/30";
return (
<Link
key={book.id}
href={`/book?book=${encodeURIComponent(book.id)}`}
className="group flex items-center gap-2 rounded-r-lg py-1 pl-3 pr-2 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--background)]/40 hover:text-[var(--foreground)]"
>
<span
className={`block h-1.5 w-1.5 shrink-0 rounded-full ${dot}`}
/>
<span className="min-w-0 flex-1 truncate text-[13px]">
{book.title || "Untitled book"}
</span>
<span className="shrink-0 text-[10px] tabular-nums text-[var(--muted-foreground)]/40">
{formatRelativeTime(Number(book.updated_at) || 0, i18n.language)}
</span>
</Link>
);
})}
</div>
);
}