Merge: snippets feature end-to-end (Agent B)
This commit is contained in:
@@ -18,6 +18,7 @@ export function Nav({ user }: { user: Session["user"] }) {
|
||||
|
||||
<nav className="hidden md:flex items-center gap-1 ml-2">
|
||||
<NavLink href="/memories">Memories</NavLink>
|
||||
<NavLink href="/snippets">Snippets</NavLink>
|
||||
<NavLink href="/projects">Projects</NavLink>
|
||||
<NavLink href="/settings">Settings</NavLink>
|
||||
</nav>
|
||||
|
||||
@@ -0,0 +1,251 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { and, eq, isNull } from "drizzle-orm";
|
||||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db/client";
|
||||
import { snippets, projects } from "@/lib/db/schema";
|
||||
import { updateSnippetAction, deleteSnippetAction } from "@/lib/snippet-actions";
|
||||
import { getSnippet, type SnippetWithProjectKey } from "@/lib/snippets";
|
||||
import { Container, PageHeader } from "@/app/_components/ui/container";
|
||||
import { Card, CardBody, CardHeader } from "@/app/_components/ui/card";
|
||||
import { Input, Textarea, Label } from "@/app/_components/ui/input";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
import { Badge } from "@/app/_components/ui/badge";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
interface SiblingHit {
|
||||
scope: "project" | "user";
|
||||
projectKey: string | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* When a snippet name exists in more than one scope (e.g. a user-scope
|
||||
* default plus one or more project-scope variants), we need to either
|
||||
* disambiguate by query string or, if no hint is given, show a picker.
|
||||
*/
|
||||
async function findAllMatches(userId: string, name: string): Promise<SiblingHit[]> {
|
||||
const rows = await db
|
||||
.select({
|
||||
scope: snippets.scope,
|
||||
projectKey: projects.key,
|
||||
})
|
||||
.from(snippets)
|
||||
.leftJoin(projects, eq(snippets.projectId, projects.id))
|
||||
.where(and(eq(snippets.userId, userId), eq(snippets.name, name), isNull(snippets.deletedAt)));
|
||||
return rows as SiblingHit[];
|
||||
}
|
||||
|
||||
export default async function SnippetDetailPage({
|
||||
params,
|
||||
searchParams,
|
||||
}: {
|
||||
params: Promise<{ name: string }>;
|
||||
searchParams: Promise<{ scope?: string; project?: string; edit?: string }>;
|
||||
}) {
|
||||
const session = await auth();
|
||||
const userId = session!.user.id;
|
||||
const { name: rawName } = await params;
|
||||
const name = decodeURIComponent(rawName);
|
||||
const sp = await searchParams;
|
||||
const scope: "project" | "user" | undefined =
|
||||
sp.scope === "user" || sp.scope === "project" ? sp.scope : undefined;
|
||||
const project = sp.project?.trim() || undefined;
|
||||
const isEditing = sp.edit === "1";
|
||||
|
||||
const siblings = await findAllMatches(userId, name);
|
||||
if (siblings.length === 0) notFound();
|
||||
|
||||
// If multiple matches and the user hasn't disambiguated, show a picker.
|
||||
if (!scope && siblings.length > 1) {
|
||||
return (
|
||||
<Container className="pt-6 max-w-3xl">
|
||||
<PageHeader
|
||||
title={name}
|
||||
description={`This name exists in ${siblings.length} scopes — pick one to view.`}
|
||||
actions={
|
||||
<Link href="/snippets" className="no-underline">
|
||||
<Button type="button" variant="secondary">
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<Card>
|
||||
{siblings.map((s, i) => {
|
||||
const params = new URLSearchParams({ scope: s.scope });
|
||||
if (s.scope === "project" && s.projectKey) {
|
||||
params.set("project", s.projectKey);
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={`${s.scope}-${s.projectKey ?? ""}`}
|
||||
href={`/snippets/${encodeURIComponent(name)}?${params.toString()}`}
|
||||
className={`block px-4 py-3 hover:bg-surface-2 no-underline ${i > 0 ? "border-t border-border" : ""}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge tone={s.scope === "user" ? "accent" : "neutral"}>{s.scope}</Badge>
|
||||
{s.projectKey ? (
|
||||
<span className="font-mono text-sm text-fg">{s.projectKey}</span>
|
||||
) : (
|
||||
<span className="text-sm text-fg-muted">applies everywhere</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const snippet: SnippetWithProjectKey | null = await getSnippet(userId, {
|
||||
name,
|
||||
scope,
|
||||
projectKey: project,
|
||||
});
|
||||
|
||||
if (!snippet) notFound();
|
||||
|
||||
return (
|
||||
<Container className="pt-6 max-w-3xl">
|
||||
<PageHeader
|
||||
title={isEditing ? `Edit ${snippet.name}` : snippet.name}
|
||||
description={
|
||||
<span className="font-mono text-xs text-fg-subtle">
|
||||
{snippet.scope}
|
||||
{snippet.projectKey ? ` · ${snippet.projectKey}` : ""}
|
||||
</span>
|
||||
}
|
||||
actions={
|
||||
<>
|
||||
<Link href="/snippets" className="no-underline">
|
||||
<Button type="button" variant="secondary">
|
||||
Back
|
||||
</Button>
|
||||
</Link>
|
||||
{!isEditing ? (
|
||||
<Link
|
||||
href={`/snippets/${encodeURIComponent(snippet.name)}?${new URLSearchParams({
|
||||
scope: snippet.scope,
|
||||
...(snippet.scope === "project" && snippet.projectKey
|
||||
? { project: snippet.projectKey }
|
||||
: {}),
|
||||
edit: "1",
|
||||
}).toString()}`}
|
||||
className="no-underline"
|
||||
>
|
||||
<Button>Edit</Button>
|
||||
</Link>
|
||||
) : null}
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Card className="mb-4">
|
||||
<CardHeader className="flex items-center gap-2 text-xs text-fg-muted flex-wrap">
|
||||
<Badge tone={snippet.scope === "user" ? "accent" : "neutral"}>{snippet.scope}</Badge>
|
||||
{snippet.projectKey ? <span className="font-mono">{snippet.projectKey}</span> : null}
|
||||
<span>· Created {new Date(snippet.createdAt).toLocaleString()}</span>
|
||||
{snippet.updatedAt.getTime() !== snippet.createdAt.getTime() ? (
|
||||
<span>· Updated {new Date(snippet.updatedAt).toLocaleString()}</span>
|
||||
) : null}
|
||||
</CardHeader>
|
||||
|
||||
{isEditing ? (
|
||||
<CardBody>
|
||||
<form action={updateSnippetAction} className="space-y-4">
|
||||
<input type="hidden" name="name" value={snippet.name} />
|
||||
<input type="hidden" name="scope" value={snippet.scope} />
|
||||
{snippet.scope === "project" && snippet.projectKey ? (
|
||||
<input type="hidden" name="project" value={snippet.projectKey} />
|
||||
) : null}
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description" hint="Optional">
|
||||
Description
|
||||
</Label>
|
||||
<Input
|
||||
id="description"
|
||||
name="description"
|
||||
defaultValue={snippet.description ?? ""}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="body">Body</Label>
|
||||
<Textarea
|
||||
id="body"
|
||||
name="body"
|
||||
required
|
||||
rows={16}
|
||||
defaultValue={snippet.body}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="tags" hint="comma- or space-separated">
|
||||
Tags
|
||||
</Label>
|
||||
<Input
|
||||
id="tags"
|
||||
name="tags"
|
||||
defaultValue={snippet.tags.join(", ")}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Link
|
||||
href={`/snippets/${encodeURIComponent(snippet.name)}?${new URLSearchParams({
|
||||
scope: snippet.scope,
|
||||
...(snippet.scope === "project" && snippet.projectKey
|
||||
? { project: snippet.projectKey }
|
||||
: {}),
|
||||
}).toString()}`}
|
||||
className="no-underline"
|
||||
>
|
||||
<Button type="button" variant="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Save changes</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardBody>
|
||||
) : (
|
||||
<CardBody>
|
||||
{snippet.description ? (
|
||||
<p className="text-sm text-fg-muted mb-3">{snippet.description}</p>
|
||||
) : null}
|
||||
<pre className="whitespace-pre-wrap break-words bg-transparent border-0 p-0 text-sm text-fg leading-relaxed font-mono">
|
||||
{snippet.body}
|
||||
</pre>
|
||||
{snippet.tags.length ? (
|
||||
<div className="flex gap-1 flex-wrap mt-4">
|
||||
{snippet.tags.map((t) => (
|
||||
<Badge key={t}>{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardBody>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{!isEditing ? (
|
||||
<form action={deleteSnippetAction} className="flex justify-end">
|
||||
<input type="hidden" name="name" value={snippet.name} />
|
||||
<input type="hidden" name="scope" value={snippet.scope} />
|
||||
{snippet.scope === "project" && snippet.projectKey ? (
|
||||
<input type="hidden" name="project" value={snippet.projectKey} />
|
||||
) : null}
|
||||
<Button type="submit" variant="danger" size="sm">
|
||||
Delete snippet
|
||||
</Button>
|
||||
</form>
|
||||
) : null}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
import Link from "next/link";
|
||||
import { desc, eq } from "drizzle-orm";
|
||||
import { auth } from "@/auth";
|
||||
import { db } from "@/lib/db/client";
|
||||
import { projects } from "@/lib/db/schema";
|
||||
import { createSnippetAction } from "@/lib/snippet-actions";
|
||||
import { Container, PageHeader } from "@/app/_components/ui/container";
|
||||
import { Card, CardBody } from "@/app/_components/ui/card";
|
||||
import { Input, Textarea, Label } from "@/app/_components/ui/input";
|
||||
import { Button } from "@/app/_components/ui/button";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function NewSnippetPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ scope?: string; project?: string; name?: string }>;
|
||||
}) {
|
||||
const session = await auth();
|
||||
const userId = session!.user.id;
|
||||
const params = await searchParams;
|
||||
const initialScope = params.scope === "project" ? "project" : "user";
|
||||
const initialProject = params.project ?? "";
|
||||
const initialName = params.name ?? "";
|
||||
|
||||
const projectList = await db
|
||||
.select({ key: projects.key, displayName: projects.displayName })
|
||||
.from(projects)
|
||||
.where(eq(projects.userId, userId))
|
||||
.orderBy(desc(projects.updatedAt))
|
||||
.limit(50);
|
||||
|
||||
return (
|
||||
<Container className="pt-6 max-w-2xl">
|
||||
<PageHeader
|
||||
title="New snippet"
|
||||
description="Name it something stable — that name is the lookup key from now on."
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardBody>
|
||||
<form action={createSnippetAction} className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="name" hint="alphanumerics + ._-/">
|
||||
Name
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
defaultValue={initialName}
|
||||
placeholder="pr-description-format"
|
||||
className="mt-1 font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="scope">Scope</Label>
|
||||
<select
|
||||
id="scope"
|
||||
name="scope"
|
||||
defaultValue={initialScope}
|
||||
className="mt-1 h-9 px-2 rounded-md bg-surface-1 border border-border text-fg text-sm w-full"
|
||||
>
|
||||
<option value="user">User — applies everywhere (default)</option>
|
||||
<option value="project">Project — tied to a specific repo</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="project" hint="Required for project scope">
|
||||
Project key
|
||||
</Label>
|
||||
<Input
|
||||
id="project"
|
||||
name="project"
|
||||
defaultValue={initialProject}
|
||||
placeholder="repo name, slug, or any stable string"
|
||||
list="project-list"
|
||||
className="mt-1"
|
||||
/>
|
||||
{projectList.length > 0 ? (
|
||||
<datalist id="project-list">
|
||||
{projectList.map((p) => (
|
||||
<option key={p.key} value={p.key}>
|
||||
{p.displayName ?? p.key}
|
||||
</option>
|
||||
))}
|
||||
</datalist>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="description" hint="Optional">
|
||||
Description
|
||||
</Label>
|
||||
<Input
|
||||
id="description"
|
||||
name="description"
|
||||
placeholder="When should this template be used?"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="body">Body</Label>
|
||||
<Textarea
|
||||
id="body"
|
||||
name="body"
|
||||
required
|
||||
rows={14}
|
||||
placeholder="The full template, format, or checklist…"
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="tags" hint="comma- or space-separated">
|
||||
Tags
|
||||
</Label>
|
||||
<Input id="tags" name="tags" placeholder="format, review, …" className="mt-1" />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Link href="/snippets" className="no-underline">
|
||||
<Button type="button" variant="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</Link>
|
||||
<Button type="submit">Save snippet</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,157 @@
|
||||
import Link from "next/link";
|
||||
import { auth } from "@/auth";
|
||||
import { listSnippets } from "@/lib/snippets";
|
||||
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 { Input } from "@/app/_components/ui/input";
|
||||
import { EmptyState } from "@/app/_components/ui/empty-state";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
type Scope = "project" | "user";
|
||||
|
||||
function detailHref(name: string, scope: Scope, projectKey: string | null): string {
|
||||
const params = new URLSearchParams({ scope });
|
||||
if (scope === "project" && projectKey) params.set("project", projectKey);
|
||||
return `/snippets/${encodeURIComponent(name)}?${params.toString()}`;
|
||||
}
|
||||
|
||||
export default async function SnippetsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ scope?: string; project?: string; tag?: string }>;
|
||||
}) {
|
||||
const session = await auth();
|
||||
const userId = session!.user.id;
|
||||
const params = await searchParams;
|
||||
const scope: Scope | undefined =
|
||||
params.scope === "user" || params.scope === "project" ? params.scope : undefined;
|
||||
const project = params.project?.trim() || undefined;
|
||||
const tag = params.tag?.trim() || undefined;
|
||||
|
||||
const rows = await listSnippets(userId, {
|
||||
scope,
|
||||
projectKey: project,
|
||||
tags: tag ? [tag] : undefined,
|
||||
limit: 200,
|
||||
});
|
||||
|
||||
return (
|
||||
<Container className="pt-6">
|
||||
<PageHeader
|
||||
title="Snippets"
|
||||
description={
|
||||
rows.length === 0
|
||||
? "Named, reusable templates. Fetched by exact name, never searched."
|
||||
: `${rows.length} snippet${rows.length === 1 ? "" : "s"}, most recently updated first.`
|
||||
}
|
||||
actions={
|
||||
<Link href="/snippets/new" className="no-underline">
|
||||
<Button>New snippet</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
|
||||
<form method="GET" action="/snippets" className="mb-6 flex flex-wrap items-center gap-2">
|
||||
<FilterSelect
|
||||
name="scope"
|
||||
value={scope}
|
||||
options={["", "project", "user"]}
|
||||
placeholder="Any scope"
|
||||
/>
|
||||
<Input
|
||||
name="project"
|
||||
placeholder="Project key…"
|
||||
defaultValue={project ?? ""}
|
||||
className="w-44"
|
||||
/>
|
||||
<Input name="tag" placeholder="Tag…" defaultValue={tag ?? ""} className="w-32" />
|
||||
<Button type="submit" variant="secondary">
|
||||
Apply
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
<EmptyState
|
||||
title="No snippets yet"
|
||||
description="Create a snippet to save a template, format, or checklist you want to reuse. Snippets are fetched by exact name — pick something stable like 'pr-description-format' or 'commit-msg-rules'."
|
||||
action={
|
||||
<Link href="/snippets/new" className="no-underline">
|
||||
<Button>Create the first one</Button>
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<ul className="space-y-2">
|
||||
{rows.map((s) => (
|
||||
<li key={s.id}>
|
||||
<Link
|
||||
href={detailHref(s.name, s.scope, s.projectKey)}
|
||||
className="block no-underline"
|
||||
>
|
||||
<Card className="hover:border-border-strong transition-colors">
|
||||
<CardBody className="space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-mono text-sm text-fg">{s.name}</span>
|
||||
<Badge tone={s.scope === "user" ? "accent" : "neutral"}>
|
||||
{s.scope}
|
||||
</Badge>
|
||||
{s.projectKey ? (
|
||||
<span className="font-mono text-xs text-fg-subtle">
|
||||
· {s.projectKey}
|
||||
</span>
|
||||
) : null}
|
||||
<span className="ml-auto text-xs text-fg-subtle">
|
||||
updated {new Date(s.updatedAt).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
{s.description ? (
|
||||
<p className="text-sm text-fg-muted line-clamp-2">{s.description}</p>
|
||||
) : (
|
||||
<p className="text-sm text-fg-subtle line-clamp-2 font-mono">{s.body}</p>
|
||||
)}
|
||||
{s.tags.length ? (
|
||||
<div className="flex gap-1 flex-wrap">
|
||||
{s.tags.map((t) => (
|
||||
<Badge key={t}>{t}</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
function FilterSelect({
|
||||
name,
|
||||
value,
|
||||
options,
|
||||
placeholder,
|
||||
}: {
|
||||
name: string;
|
||||
value: string | undefined;
|
||||
options: string[];
|
||||
placeholder: string;
|
||||
}) {
|
||||
return (
|
||||
<select
|
||||
name={name}
|
||||
defaultValue={value ?? ""}
|
||||
className="h-9 px-2 rounded-md bg-surface-1 border border-border text-fg text-sm"
|
||||
>
|
||||
{options.map((o) => (
|
||||
<option key={o} value={o}>
|
||||
{o === "" ? placeholder : o}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user