274 lines
No EOL
13 KiB
TypeScript
274 lines
No EOL
13 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useDeleteDoc, useGalleryDoc, useGalleryDocSimilar, useRehashDoc, useRescanDoc } from "../hook/useGalleryDoc.ts";
|
|
import TagBadge from "@/components/gallery/TagBadge";
|
|
import StyledLink from "@/components/gallery/StyledLink";
|
|
import { Link, useLocation } from "wouter";
|
|
import { classifyTags } from "../lib/classifyTags.tsx";
|
|
import { DescTagItem, DescItem } from "../components/gallery/DescItem.tsx";
|
|
import { Button } from "@/components/ui/button.tsx";
|
|
import { GalleryCard } from "@/components/gallery/GalleryCard.tsx";
|
|
import { useEffect } from "react";
|
|
import { useLogin } from "@/state/user.ts";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu.tsx";
|
|
import { EllipsisVerticalIcon, FileIcon } from "lucide-react";
|
|
import {
|
|
RefreshCw, ScanSearch, Trash2,
|
|
Paintbrush
|
|
, Users, BookOpen, User, Clock, FileCheck, FileText, Layers, Tag, Loader2, AlertCircle, FileQuestion
|
|
} from "lucide-react";
|
|
|
|
export interface ContentInfoPageProps {
|
|
params: {
|
|
id: string;
|
|
};
|
|
}
|
|
|
|
function Wrapper({ children }: { children: React.ReactNode }) {
|
|
const [pathname] = useLocation();
|
|
useEffect(() => {
|
|
document.scrollingElement?.scrollTo({
|
|
top: 0,
|
|
});
|
|
}, [pathname]);
|
|
|
|
return <div className="p-4">
|
|
{children}
|
|
</div>;
|
|
}
|
|
|
|
export function ContentInfoPage({ params }: ContentInfoPageProps) {
|
|
const { data, error, isLoading } = useGalleryDoc(params.id);
|
|
const rehashDoc = useRehashDoc();
|
|
const rescanDoc = useRescanDoc();
|
|
const deleteDoc = useDeleteDoc();
|
|
const user = useLogin();
|
|
const username = user?.username;
|
|
const isAdmin = username === "admin";
|
|
|
|
if (isLoading) {
|
|
return <div className="p-8 flex flex-col items-center justify-center h-full">
|
|
<Loader2 className="w-16 h-16 animate-spin text-primary mb-4" />
|
|
<span className="text-xl font-medium text-muted-foreground">
|
|
콘텐츠 정보 로드 중...
|
|
</span>
|
|
</div>
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="p-8 flex flex-col items-center justify-center h-full text-destructive">
|
|
<AlertCircle className="w-16 h-16 mb-4" />
|
|
<div className="text-xl font-medium mb-2">오류가 발생했습니다</div>
|
|
<div className="text-destructive/80 bg-destructive/10 p-3 rounded-md">{String(error)}</div>
|
|
</div>
|
|
}
|
|
|
|
if (!data) {
|
|
return <div className="p-8 flex flex-col items-center justify-center h-full text-muted-foreground">
|
|
<FileQuestion className="w-16 h-16 mb-4" />
|
|
<div className="text-xl font-medium">콘텐츠를 찾을 수 없습니다</div>
|
|
<Button variant="outline" className="mt-4">
|
|
<Link href="/search">검색 페이지로 이동</Link>
|
|
</Button>
|
|
</div>
|
|
}
|
|
|
|
const tags = data?.tags ?? [];
|
|
const classifiedTags = classifyTags(tags);
|
|
|
|
const contentLocation = `/doc/${params.id}/reader`;
|
|
|
|
return (
|
|
<Wrapper>
|
|
<Link to={contentLocation}>
|
|
<div className="m-auto h-[400px] mb-6 flex justify-center items-center flex-none bg-gradient-to-b from-[#1d1d25] to-[#272733]
|
|
rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 group">
|
|
<img
|
|
className="max-w-full max-h-full object-cover object-center group-hover:scale-[1.02] transition-transform duration-300"
|
|
src={`/api/doc/${data.id}/comic/thumbnail`}
|
|
alt={data.title} />
|
|
</div>
|
|
</Link>
|
|
<Card className="flex-1 relative">
|
|
<div className="flex justify-between items-start p-6">
|
|
<CardHeader className="p-0">
|
|
<CardTitle className="font-bold bg-clip-text">
|
|
<StyledLink to={contentLocation} className="hover:no-underline">
|
|
{data.title}
|
|
</StyledLink>
|
|
</CardTitle>
|
|
<CardDescription className="mt-1">
|
|
<StyledLink to={`/search?allow_tag=type:${classifiedTags.type[0] ?? ""}`}
|
|
className="text-sm px-2 py-0.5 rounded-md inline-flex items-center gap-1">
|
|
<Tag className="w-3.5 h-3.5" />
|
|
{classifiedTags.type[0] ?? "N/A"}
|
|
</StyledLink>
|
|
</CardDescription>
|
|
</CardHeader>
|
|
{isAdmin &&
|
|
<div className="z-10">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="hover:bg-secondary/50 flex items-center gap-1.5 rounded-full px-3">
|
|
<EllipsisVerticalIcon className="w-4 h-4" />
|
|
<span className="font-medium">Actions</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="animate-in fade-in-50 zoom-in-95 duration-100">
|
|
<DropdownMenuItem
|
|
onClick={async () => {
|
|
await rehashDoc(params.id);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
Rehash
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={async () => {
|
|
if (!window.confirm("Are you sure?")) {
|
|
return;
|
|
}
|
|
await rescanDoc(params.id);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer"
|
|
>
|
|
<ScanSearch className="w-4 h-4" />
|
|
Rescan
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={async () => {
|
|
if (!window.confirm("Are you sure?")) {
|
|
return;
|
|
}
|
|
await deleteDoc(params.id);
|
|
}}
|
|
className="flex items-center gap-2 cursor-pointer text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
}
|
|
</div>
|
|
<CardContent>
|
|
<div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
|
|
<DescTagItem name="Artist" items={classifiedTags.artist}
|
|
icon={<Paintbrush className="w-4 h-4" />} />
|
|
|
|
<DescTagItem name="Group" items={classifiedTags.group}
|
|
icon={<Users className="w-4 h-4" />} />
|
|
|
|
<DescTagItem name="Series" items={classifiedTags.series}
|
|
icon={<BookOpen className="w-4 h-4" />} />
|
|
|
|
<DescTagItem name="Character" items={classifiedTags.character}
|
|
icon={<User className="w-4 h-4" />} />
|
|
|
|
<DescItem name="Created At / Modified At"
|
|
icon={<Clock className="w-4 h-4" />}
|
|
className="md:col-span-2">
|
|
<div className="flex flex-wrap gap-x-2">
|
|
<span className="bg-muted/50 px-1.5 py-0.5 rounded text-sm">{new Date(data.created_at).toLocaleString()}</span> /
|
|
<span className="bg-muted/50 px-1.5 py-0.5 rounded text-sm">{new Date(data.modified_at).toLocaleString()}</span>
|
|
</div>
|
|
</DescItem>
|
|
|
|
<DescItem name="Filehash"
|
|
icon={<FileCheck className="w-4 h-4" />}>
|
|
<span className="font-mono text-sm bg-muted/50 px-1.5 py-0.5 rounded overflow-x-auto block whitespace-nowrap max-w-full">{data.content_hash}</span>
|
|
</DescItem>
|
|
|
|
<DescItem name="Page Count"
|
|
icon={<Layers className="w-4 h-4" />}>
|
|
<span className="text-sm bg-primary/20 px-2 py-0.5 rounded-full font-medium">{data.pagenum} 페이지</span>
|
|
</DescItem>
|
|
|
|
<DescItem name="Path"
|
|
className="md:col-span-2"
|
|
icon={<FileText className="w-4 h-4" />}>
|
|
<span className="font-mono text-sm bg-muted/50 px-1.5 py-0.5 rounded overflow-x-auto text-wrap block whitespace-nowrap max-w-full">
|
|
{`${data.basepath}/${data.filename}`}
|
|
<ExplorerFindLink path={`${data.basepath}`} />
|
|
</span>
|
|
</DescItem>
|
|
|
|
</div>
|
|
<div className="grid mt-4">
|
|
<span className="text-muted-foreground text-sm">Tags</span>
|
|
<ul className="mt-2 flex flex-wrap gap-1">
|
|
{classifiedTags.rest.map((tag) => <TagBadge key={tag} tagname={tag} />)}
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<SimilarContentCard id={params.id} />
|
|
</Wrapper>
|
|
);
|
|
}
|
|
|
|
function ExplorerFindLink({ path }: { path: string }) {
|
|
// remove F:\ from the path
|
|
if (path.startsWith("/data/sss/f/")) {
|
|
path = path.slice("/data/sss/f/".length);
|
|
}
|
|
return (
|
|
<a
|
|
title="Open in explorer find"
|
|
href={`ionian-find://${path}`}
|
|
className="text-muted-foreground hover:text-primary transition-colors">
|
|
<FileIcon className="inline-block w-4 h-4 ml-2" />
|
|
</a>
|
|
);
|
|
}
|
|
|
|
function SimilarContentCard({
|
|
id,
|
|
}: {
|
|
id: string;
|
|
}) {
|
|
const { data, error, isLoading } = useGalleryDocSimilar(id);
|
|
|
|
if (isLoading) {
|
|
return <div className="p-4 mt-6 text-center animate-pulse bg-muted/20 rounded-lg">
|
|
<Loader2 className="w-6 h-6 mx-auto mb-2 animate-spin opacity-50" />
|
|
<span className="text-muted-foreground">유사 콘텐츠 불러오는 중...</span>
|
|
</div>
|
|
}
|
|
|
|
if (error) {
|
|
return <div className="p-4 mt-6 text-destructive/70 bg-destructive/10 border border-destructive/20 rounded-lg">
|
|
<div className="flex items-center gap-2">
|
|
<AlertCircle className="w-4 h-4" />
|
|
오류: {String(error)}
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
if (!data || data.length === 0) {
|
|
return <div className="p-6 mt-6 text-center bg-muted/10 rounded-lg border border-border/50">
|
|
<FileQuestion className="w-9 h-9 mx-auto mb-3 opacity-30" />
|
|
<span className="text-muted-foreground">유사한 콘텐츠가 없습니다.</span>
|
|
</div>
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4 mt-4 mx-2">
|
|
<div className="flex items-center mb-4 gap-2">
|
|
<h2 className="text-2xl font-bold bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">유사한 콘텐츠</h2>
|
|
<div className="h-[2px] flex-1 bg-gradient-to-r from-border to-transparent"></div>
|
|
<span className="text-sm text-muted-foreground bg-secondary/20 px-2 py-0.5 rounded-full">
|
|
{data.length}개 항목
|
|
</span>
|
|
</div>
|
|
<div className="grid gap-4 grid-cols-[repeat(auto_fill_300px)]">
|
|
{data.map((doc) => (
|
|
<GalleryCard key={doc.id} doc={doc} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ContentInfoPage; |