122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
 
|
import Link from "next/link";
|
||
|
|
import { notFound } from "next/navigation";
|
||
|
|
import { and, desc, eq, isNull } from "drizzle-orm";
|
||
|
|
import { auth } from "@/auth";
|
||
|
|
import { db } from "@/lib/db/client";
|
||
|
|
import { memories, projects } from "@/lib/db/schema";
|
||
|
|
import { Container, PageHeader } from "@/app/_components/ui/container";
|
||
|
|
import { Card, CardBody } from "@/app/_components/ui/card";
|
||
|
|
import { Badge } from "@/app/_components/ui/badge";
|
||
|
|
import { Button } from "@/app/_components/ui/button";
|
||
|
|
import { EmptyState } from "@/app/_components/ui/empty-state";
|
||
|
|
|
||
|
|
export const dynamic = "force-dynamic";
|
||
|
|
|
||
|
|
export default async function ProjectDetailPage({
|
||
|
|
params,
|
||
|
|
}: {
|
||
|
|
params: Promise<{ key: string }>;
|
||
|
|
}) {
|
||
|
|
const session = await auth();
|
||
|
|
const userId = session!.user.id;
|
||
|
|
const { key: rawKey } = await params;
|
||
|
|
const key = decodeURIComponent(rawKey);
|
||
|
|
|
||
|
|
const projectRow = await db
|
||
|
|
.select()
|
||
|
|
.from(projects)
|
||
|
|
.where(and(eq(projects.userId, userId), eq(projects.key, key)))
|
||
|
|
.limit(1);
|
||
|
|
const project = projectRow[0];
|
||
|
|
if (!project) notFound();
|
||
|
|
|
||
|
|
const mem = await db
|
||
|
|
.select({
|
||
|
|
id: memories.id,
|
||
|
|
scope: memories.scope,
|
||
|
|
content: memories.content,
|
||
|
|
tags: memories.tags,
|
||
|
|
createdAt: memories.createdAt,
|
||
|
|
})
|
||
|
|
.from(memories)
|
||
|
|
.where(
|
||
|
|
and(
|
||
|
|
eq(memories.userId, userId),
|
||
|
|
eq(memories.projectId, project.id),
|
||
|
|
isNull(memories.deletedAt),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
.orderBy(desc(memories.createdAt))
|
||
|
|
.limit(100);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Container className="pt-6">
|
||
|
|
<PageHeader
|
||
|
|
title={project.displayName ?? project.key}
|
||
|
|
description={
|
||
|
|
<>
|
||
|
|
<span className="font-mono">{project.key}</span>
|
||
|
|
{" · "}
|
||
|
|
{mem.length} memor{mem.length === 1 ? "y" : "ies"}
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
actions={
|
||
|
|
<>
|
||
|
|
<Link href="/projects" className="no-underline">
|
||
|
|
<Button type="button" variant="secondary">All projects</Button>
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href={`/memories/new?project=${encodeURIComponent(project.key)}`}
|
||
|
|
className="no-underline"
|
||
|
|
>
|
||
|
|
<Button>New in this project</Button>
|
||
|
|
</Link>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{mem.length === 0 ? (
|
||
|
|
<EmptyState
|
||
|
|
title="No memories in this project yet"
|
||
|
|
description="Use the MCP from a Claude Code session, or create one here."
|
||
|
|
action={
|
||
|
|
<Link
|
||
|
|
href={`/memories/new?project=${encodeURIComponent(project.key)}`}
|
||
|
|
className="no-underline"
|
||
|
|
>
|
||
|
|
<Button>Create the first one</Button>
|
||
|
|
</Link>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<ul className="space-y-2">
|
||
|
|
{mem.map((m) => (
|
||
|
|
<li key={m.id}>
|
||
|
|
<Link href={`/memories/${m.id}`} className="block no-underline">
|
||
|
|
<Card className="hover:border-border-strong transition-colors">
|
||
|
|
<CardBody className="space-y-2">
|
||
|
|
<div className="flex items-center gap-2 text-xs text-fg-subtle">
|
||
|
|
<Badge tone={m.scope === "user" ? "accent" : "neutral"}>
|
||
|
|
{m.scope}
|
||
|
|
</Badge>
|
||
|
|
<span>{new Date(m.createdAt).toLocaleString()}</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-fg line-clamp-3">{m.content}</p>
|
||
|
|
{m.tags.length ? (
|
||
|
|
<div className="flex gap-1 flex-wrap">
|
||
|
|
{m.tags.map((t) => (
|
||
|
|
<Badge key={t}>{t}</Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : null}
|
||
|
|
</CardBody>
|
||
|
|
</Card>
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
)}
|
||
|
|
</Container>
|
||
|
|
);
|
||
|
|
}
|