vectrumVectrumPublic

Add likes and lists of repositories

Anyone signed in can like a repository they can see, once. The repository
header shows a Like key and how many people like it (who, under /likes),
and a person's profile has a Liked tab.

The Save key puts a repository in lists, or makes a new list with it on
the spot. Lists belong to a person or an organization, live at
/lists/<owner>/<slug> and on the profile's Lists tab, and are public or
private (only the person, or the organization's members). Members with
write or more manage an organization's lists. A list only ever shows a
viewer the repositories they could see anyway, so private repositories
can sit in public lists. "lists" becomes a reserved username.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Browse Files

JjohannSocommitted last week1 parent dd295d0commit9e2c1b7

Showing 26 changed files with 1199 additions and 103 deletions.

+23−2apps/web/app/[owner]/[repo]/layout.tsxView File

@@ -1,9 +1,11 @@
1	1	import Link from "next/link";
2	2	import { ForkedFrom, ForkLabel } from "@/components/forks";
3	3	import { ForkIcon } from "@/components/icons";
	4	+ import { LikeButton, SaveButton } from "@/components/repo-save";
4	5	import { RepoTabs } from "@/components/repo-tabs";
5	6	import { ButtonLink, Label, RepoAvatar, VisibilityLabel } from "@/components/ui";
6	7	import { openIssueCount } from "@/lib/issues";
	8	+ import { countLikes, likes, saveTargets } from "@/lib/lists";
7	9	import { countOpenPulls } from "@/lib/pulls";
8	10	import { countImages } from "@/lib/registry";
9	11	import { getRepo } from "@/lib/repo";
@@ -24,7 +26,14 @@ export default async function RepoLayout({ params, children }: LayoutProps<"/[ow
24	26	const repo = await getRepo(owner, repoParam);
25	27	// Like GitHub, readers only see the tab once the wiki has a page.
26	28	const showWiki = repo.wikiEnabled && (repo.canWrite \|\| (await wikiHead(repo)).head !== null);
27		- const [parent, forks] = await Promise.all([visibleParent(repo, repo.viewer?.id), countForks(repo.id, repo.viewer?.id ?? null)]);
	29	+ const viewer = repo.viewer;
	30	+ const [parent, forks, likeCount, liked, targets] = await Promise.all([
	31	+ visibleParent(repo, viewer?.id),
	32	+ countForks(repo.id, viewer?.id ?? null),
	33	+ countLikes(repo.id),
	34	+ likes(repo.id, viewer?.id),
	35	+ viewer ? saveTargets(viewer, repo.id) : null,
	36	+ ]);
28	37
29	38	return (
30	39	<>
@@ -49,7 +58,19 @@ export default async function RepoLayout({ params, children }: LayoutProps<"/[ow
49	58	{repo.forkOf && <ForkedFrom parent={parent} className="ml-1 hidden lg:inline-flex" />}
50	59	</div>
51	60	<RepoTabs base={repo.base} openIssues={await openIssueCount(repo.id)} openPulls={await countOpenPulls(repo.id)} images={countImages(repo.id)} showWiki={showWiki} showSettings={repo.isAdmin} />
52		- <div className="ml-auto flex items-center gap-2 2xl:ml-0 2xl:justify-self-end">
	61	+ <div className="ml-auto flex flex-wrap items-center gap-2 2xl:ml-0 2xl:justify-self-end">
	62	+ <LikeButton owner={repo.owner} name={repo.name} liked={liked} signedIn={!!viewer} />
	63	+ <Link href={`${repo.base}/likes`} className="rounded-key px-1 type-readout text-ink2 transition-colors hover:text-ink focus-visible:focus-ring">
	64	+ {likeCount} {likeCount === 1 ? "like" : "likes"}
	65	+ </Link>
	66	+ {viewer && targets && (
	67	+ <SaveButton
	68	+ repoId={repo.id}
	69	+ viewer={viewer.username}
	70	+ owners={targets.owners.map((o) => o.username)}
	71	+ lists={targets.lists.map((l) => ({ id: l.id, owner: l.owner.username, name: l.name, visibility: l.visibility, saved: l.saved }))}
	72	+ />
	73	+ )}
53	74	<ButtonLink href={`${repo.base}/fork`} icon={<ForkIcon />}>
54	75	Fork
55	76	</ButtonLink>

+48−0apps/web/app/[owner]/[repo]/likes/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import Link from "next/link";
++ import { HeartIcon } from "@/components/icons";
++ import { Avatar, Blankslate, Box, PageTitle } from "@/components/ui";
++ import { timeAgo } from "@/lib/format";
++ import { listLikers } from "@/lib/lists";
++ import { getRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "Likes" };
++ export default async function LikesPage({ params }: PageProps<"/[owner]/[repo]/likes">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const likers = await listLikers(repo.id);
++   return (
++     <div className="mx-auto max-w-6xl">
++       <PageTitle title="Likes" description={`People who like ${repo.owner}/${repo.name}.`} />
++       {likers.length === 0 ? (
++         <Box>
++           <Blankslate icon={<HeartIcon />} title="Nobody likes this repository yet">
++             Like it to show your appreciation and find it again on your profile.
++           </Blankslate>
++         </Box>
++       ) : (
++         <Box className="p-1.5">
++           <ul className="grid gap-0.5 sm:grid-cols-2 lg:grid-cols-3">
++             {likers.map(({ user, likedAt }) => (
++               <li key={user.id}>
++                 <Link
++                   href={`/${user.username}`}
++                   className="flex items-center gap-3 rounded-plate px-3 py-2.5 transition-row outline-none hover:recipe-row-list-hover focus-visible:focus-ring-flush"
++                 >
++                   <Avatar name={user.name || user.username} size={32} />
++                   <span className="min-w-0 flex-1">
++                     <span className="block truncate type-title text-ink">{user.name || user.username}</span>
++                     <span className="block truncate type-meta text-ink3">@{user.username}</span>
++                   </span>
++                   <span className="shrink-0 type-readout text-ink3">{timeAgo(likedAt)}</span>
++                 </Link>
++               </li>
++             ))}
++           </ul>
++         </Box>
++       )}
++     </div>
++   );
++ }

+29−40apps/web/app/[owner]/org-profile.tsxView File

@@ -1,29 +1,31 @@
1	1	import Link from "next/link";
2		- import { Field } from "@unlocalhosted/metalui";
3		- import { CalendarIcon, GearIcon, OrganizationIcon, PeopleIcon, PlusIcon, RepoIcon, SearchIcon } from "@/components/icons";
4		- import { FieldIcon, FieldInput } from "@/components/metal";
	2	+ import { CalendarIcon, GearIcon, OrganizationIcon, PeopleIcon, PlusIcon } from "@/components/icons";
5	3	import { OrgInvitations } from "@/components/org-invitations";
6		- import { RepoList } from "@/components/repo-list";
7		- import { Avatar, Blankslate, Box, ButtonLink, Counter, Label } from "@/components/ui";
	4	+ import { matches, ProfileTabs, type ProfileTab } from "@/components/profile-tabs";
	5	+ import { Avatar, Box, ButtonLink, Counter, Label } from "@/components/ui";
8	6	import { formatDate } from "@/lib/format";
9		- import { withActivity } from "@/lib/listing";
	7	+ import { listListsOf } from "@/lib/lists";
10	8	import { listInvitationsFor, listOrgMembers, orgRole, ROLE_INFO, roleAtLeast } from "@/lib/orgs";
11	9	import { listReposByOwner } from "@/lib/repos";
12	10	import type { User } from "@/lib/users";
	11	+ import { ListsTab, RepositoriesTab } from "./tabs";
13	12
14	13	const heading = "text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink";
15	14
16		- /** An organization's page: its repositories the viewer can see and, for its members, its people. */
17		- export async function OrgProfile({ org, viewer, q }: { org: User; viewer: User \| null; q: string }) {
18		- const [role, invitations, all] = await Promise.all([
19		- orgRole(org.id, viewer?.id),
	15	+ /** An organization's page: its repositories and lists the viewer can see and, for its members, its people. */
	16	+ export async function OrgProfile({ org, viewer, q, tab: wanted }: { org: User; viewer: User \| null; q: string; tab: ProfileTab }) {
	17	+ const viewerId = viewer?.id ?? null;
	18	+ const [role, invitations, all, lists] = await Promise.all([
	19	+ orgRole(org.id, viewerId),
20	20	viewer ? listInvitationsFor(viewer.id) : [],
21		- listReposByOwner(org.id, viewer?.id ?? null).then((repos) => withActivity(repos, viewer?.id)),
	21	+ listReposByOwner(org.id, viewerId),
	22	+ listListsOf(org, viewerId),
22	23	]);
	24	+ // Organizations don't like repositories; only people do.
	25	+ const tab = wanted === "likes" ? "repositories" : wanted;
23	26	// Who belongs to an organization is for its members to see.
24	27	const members = role ? await listOrgMembers(org.id) : [];
25	28	const invitation = invitations.filter((i) => i.org.id === org.id);
26		- const repos = q ? all.filter((r) => r.name.toLowerCase().includes(q) \|\| r.description.toLowerCase().includes(q)) : all;
27	29	const publicCount = all.filter((r) => r.visibility === "public").length;
28	30
29	31	return (
@@ -66,35 +68,22 @@ export async function OrgProfile({ org, viewer, q }: { org: User; viewer: User \|
66	68	<main className="flex min-w-0 flex-col gap-8">
67	69	{invitation.length > 0 && <OrgInvitations invitations={invitation} />}
68	70
69		- <section>
70		- <div className="mb-5 flex flex-wrap items-center gap-3">
71		- <h2 className="flex items-center gap-2 type-display text-ink">
72		- <RepoIcon className="text-ink2" /> Repositories <Counter>{all.length}</Counter>
73		- </h2>
74		- <div className="ml-auto flex w-full items-center gap-2 sm:w-auto">
75		- <form role="search" className="flex-1 sm:w-72">
76		- <Field size="regular">
77		- <FieldIcon>
78		- <SearchIcon />
79		- </FieldIcon>
80		- <FieldInput name="q" defaultValue={q} placeholder="Find a repository…" aria-label="Find a repository" />
81		- </Field>
82		- </form>
83		- {roleAtLeast(role, "admin") && (
84		- <ButtonLink href={`/new?owner=${org.username}`} variant="primary" icon={<PlusIcon />}>
85		- New
86		- </ButtonLink>
87		- )}
88		- </div>
89		- </div>
90		- {repos.length > 0 ? (
91		- <RepoList repos={repos} showOwner={false} />
92		- ) : (
93		- <Box>
94		- <Blankslate icon={<RepoIcon />} title={q ? "No matching repositories" : `${org.username} doesn’t have any repositories yet.`} />
95		- </Box>
	71	+ <ProfileTabs
	72	+ username={org.username}
	73	+ tab={tab}
	74	+ counts={{ repositories: all.length, lists: lists.length }}
	75	+ q={q}
	76	+ newHref={
	77	+ tab === "lists"
	78	+ ? roleAtLeast(role, "write") && `/lists/new?owner=${org.username}`
	79	+ : roleAtLeast(role, "admin") && `/new?owner=${org.username}`
	80	+ }
	81	+ >
	82	+ {tab === "repositories" && (
	83	+ <RepositoriesTab repos={all.filter((r) => matches(q, r))} viewerId={viewerId} empty={q ? "No matching repositories" : `${org.username} doesn’t have any repositories yet.`} />
96	84	)}
97		- </section>
	85	+ {tab === "lists" && <ListsTab lists={lists.filter((l) => matches(q, l))} viewerId={viewerId} empty={q ? "No matching lists" : `${org.username} doesn’t have any lists yet.`} />}
	86	+ </ProfileTabs>
98	87
99	88	{role && (
100	89	<section>

+22−37apps/web/app/[owner]/page.tsxView File

@@ -1,15 +1,14 @@
1	1	import { notFound } from "next/navigation";
2		- import { Field } from "@unlocalhosted/metalui";
3		- import { CalendarIcon, PencilIcon, PlusIcon, RepoIcon, SearchIcon } from "@/components/icons";
4		- import { FieldIcon, FieldInput } from "@/components/metal";
5		- import { RepoList } from "@/components/repo-list";
6		- import { Avatar, Blankslate, Box, ButtonLink, Counter } from "@/components/ui";
	2	+ import { CalendarIcon, PencilIcon } from "@/components/icons";
	3	+ import { matches, profileTab, ProfileTabs } from "@/components/profile-tabs";
	4	+ import { Avatar, Box, ButtonLink } from "@/components/ui";
7	5	import { getViewer } from "@/lib/auth";
8	6	import { formatDate } from "@/lib/format";
9		- import { withActivity } from "@/lib/listing";
	7	+ import { countLikedRepos, listListsOf } from "@/lib/lists";
10	8	import { listReposByOwner } from "@/lib/repos";
11	9	import { getUserByUsername } from "@/lib/users";
12	10	import { OrgProfile } from "./org-profile";
	11	+ import { LikedTab, ListsTab, RepositoriesTab } from "./tabs";
13	12
14	13	export async function generateMetadata({ params }: PageProps<"/[owner]">) {
15	14	const user = await getUserByUsername((await params).owner);
@@ -21,11 +20,13 @@ const heading = "text-[22px] leading-7 font-semibold tracking-[-0.025em] text-in
21	20	export default async function ProfilePage({ params, searchParams }: PageProps<"/[owner]">) {
22	21	const user = await getUserByUsername((await params).owner);
23	22	if (!user) notFound();
24		- const q = String((await searchParams).q ?? "").trim().toLowerCase();
	23	+ const sp = await searchParams;
	24	+ const q = String(sp.q ?? "").trim().toLowerCase();
	25	+ const tab = profileTab(sp.tab);
25	26	const viewer = await getViewer();
26		- if (user.isOrg) return <OrgProfile org={user} viewer={viewer} q={q} />;
27		- const all = await withActivity(await listReposByOwner(user.id, viewer?.id ?? null), viewer?.id);
28		- const repos = q ? all.filter((r) => r.name.toLowerCase().includes(q) \|\| r.description.toLowerCase().includes(q)) : all;
	27	+ if (user.isOrg) return <OrgProfile org={user} viewer={viewer} q={q} tab={tab} />;
	28	+ const viewerId = viewer?.id ?? null;
	29	+ const [all, lists, likedCount] = await Promise.all([listReposByOwner(user.id, viewerId), listListsOf(user, viewerId), countLikedRepos(user.id, viewerId)]);
29	30	const isSelf = viewer?.id === user.id;
30	31	const publicCount = all.filter((r) => r.visibility === "public").length;
31	32
@@ -61,33 +62,17 @@ export default async function ProfilePage({ params, searchParams }: PageProps<"/
61	62	</aside>
62	63
63	64	<main className="min-w-0">
64		- <div className="mb-5 flex flex-wrap items-center gap-3">
65		- <h2 className="flex items-center gap-2 type-display text-ink">
66		- <RepoIcon className="text-ink2" /> Repositories <Counter>{all.length}</Counter>
67		- </h2>
68		- <div className="ml-auto flex w-full items-center gap-2 sm:w-auto">
69		- <form role="search" className="flex-1 sm:w-72">
70		- <Field size="regular">
71		- <FieldIcon>
72		- <SearchIcon />
73		- </FieldIcon>
74		- <FieldInput name="q" defaultValue={q} placeholder="Find a repository…" aria-label="Find a repository" />
75		- </Field>
76		- </form>
77		- {isSelf && (
78		- <ButtonLink href="/new" variant="primary" icon={<PlusIcon />}>
79		- New
80		- </ButtonLink>
81		- )}
82		- </div>
83		- </div>
84		- {repos.length > 0 ? (
85		- <RepoList repos={repos} showOwner={false} />
86		- ) : (
87		- <Box>
88		- <Blankslate icon={<RepoIcon />} title={q ? "No matching repositories" : `${user.username} doesn’t have any repositories yet.`} />
89		- </Box>
90		- )}
	65	+ <ProfileTabs
	66	+ username={user.username}
	67	+ tab={tab}
	68	+ counts={{ repositories: all.length, lists: lists.length, likes: likedCount }}
	69	+ q={q}
	70	+ newHref={isSelf && tab !== "likes" ? (tab === "lists" ? "/lists/new" : "/new") : null}
	71	+ >
	72	+ {tab === "repositories" && <RepositoriesTab repos={all.filter((r) => matches(q, r))} viewerId={viewerId} empty={q ? "No matching repositories" : `${user.username} doesn’t have any repositories yet.`} />}
	73	+ {tab === "lists" && <ListsTab lists={lists.filter((l) => matches(q, l))} viewerId={viewerId} empty={q ? "No matching lists" : isSelf ? "You haven’t made any lists yet." : `${user.username} doesn’t have any lists yet.`} />}
	74	+ {tab === "likes" && <LikedTab userId={user.id} viewerId={viewerId} q={q} empty={q ? "No matching repositories" : isSelf ? "You haven’t liked any repositories yet." : `${user.username} hasn’t liked any repositories yet.`} />}
	75	+ </ProfileTabs>
91	76	</main>
92	77	</div>
93	78	);

+38−0apps/web/app/[owner]/tabs.tsxaddedView File

++ import type { ReactNode } from "react";
++ import { BookmarkIcon, HeartIcon, RepoIcon } from "@/components/icons";
++ import { ListCards } from "@/components/list-cards";
++ import { matches } from "@/components/profile-tabs";
++ import { RepoList } from "@/components/repo-list";
++ import { Blankslate, Box } from "@/components/ui";
++ import { withActivity } from "@/lib/listing";
++ import { listLikedRepos, withRepoCounts, type RepoList as List } from "@/lib/lists";
++ import type { RepoRecord } from "@/lib/repos";
++ // What a profile's tabs show (see components/profile-tabs.tsx), for people and organizations.
++ type Tab = { viewerId: string | null; empty: string };
++ export async function RepositoriesTab({ repos, viewerId, empty }: Tab & { repos: RepoRecord[] }) {
++   if (!repos.length) return <Empty icon={<RepoIcon />} title={empty} />;
++   return <RepoList repos={await withActivity(repos, viewerId)} showOwner={false} />;
++ }
++ export async function ListsTab({ lists, viewerId, empty }: Tab & { lists: List[] }) {
++   if (!lists.length) return <Empty icon={<BookmarkIcon />} title={empty} />;
++   return <ListCards lists={await withRepoCounts(lists, viewerId)} />;
++ }
++ /** The repositories a person likes, the latest liked first. */
++ export async function LikedTab({ userId, viewerId, q, empty }: Tab & { userId: string; q: string }) {
++   const repos = (await listLikedRepos(userId, viewerId)).filter((r) => matches(q, r));
++   if (!repos.length) return <Empty icon={<HeartIcon />} title={empty} />;
++   return <RepoList repos={await withActivity(repos, viewerId)} />;
++ }
++ function Empty({ icon, title }: { icon: ReactNode; title: string }) {
++   return (
++     <Box>
++       <Blankslate icon={icon} title={title} />
++     </Box>
++   );
++ }

+120−0apps/web/app/actions/lists.tsaddedView File

++ "use server";
++ import { revalidatePath } from "next/cache";
++ import { redirect } from "next/navigation";
++ import { createList, deleteList, findList, findListById, ListError, listPath, mayManageLists, setInList, setLiked, updateList, type RepoList } from "@/lib/lists";
++ import { findRepoById, repoAccess } from "@/lib/repos";
++ import { getUserByUsername } from "@/lib/users";
++ import { ActionError, repoForAction, viewerOrThrow } from "./guard";
++ import type { FormState } from "./types";
++ // Anyone signed in likes the repositories they can read, and saves them to their own lists and to
++ // those of organizations they can push in.
++ async function attempt(fn: () => Promise<FormState | void>): Promise<FormState> {
++   try {
++     return (await fn()) ?? undefined;
++   } catch (e) {
++     if (e instanceof ListError || e instanceof ActionError) return { error: e.message };
++     throw e;
++   }
++ }
++ function listInput(formData: FormData) {
++   return {
++     name: String(formData.get("name") ?? ""),
++     description: String(formData.get("description") ?? ""),
++     visibility: formData.get("visibility") === "private" ? ("private" as const) : ("public" as const),
++   };
++ }
++ /** A list the viewer may change. */
++ async function listForAction(list: RepoList | null) {
++   const viewer = await viewerOrThrow();
++   if (!list || !(await mayManageLists(list.owner, viewer.id))) throw new ActionError("List not found.");
++   return { list, viewer };
++ }
++ /** A repository the viewer can read, by id. */
++ async function readableRepo(repoId: string, viewerId: string) {
++   const repo = await findRepoById(String(repoId));
++   if (!repo || !(await repoAccess(repo, viewerId))) throw new ActionError("Repository not found.");
++   return repo;
++ }
++ const refreshList = (list: RepoList) => {
++   revalidatePath(listPath(list));
++   revalidatePath(`/${list.owner.username}`);
++ };
++ export async function setLikedAction(owner: string, name: string, liked: boolean): Promise<FormState> {
++   return attempt(async () => {
++     const { repo, viewer } = await repoForAction(owner, name, "read");
++     await setLiked(repo, viewer, liked === true);
++     revalidatePath(`/${repo.owner}/${repo.name}`, "layout");
++     revalidatePath(`/${viewer.username}`);
++   });
++ }
++ /** Puts a repository in one of the viewer's lists (or an organization's), or takes it out. */
++ export async function setSavedAction(listId: string, repoId: string, saved: boolean): Promise<FormState> {
++   return attempt(async () => {
++     const { list, viewer } = await listForAction(await findListById(String(listId)));
++     const repo = await readableRepo(repoId, viewer.id);
++     await setInList(list, repo.id, saved === true);
++     refreshList(list);
++     revalidatePath(`/${repo.owner}/${repo.name}`, "layout");
++     return { success: saved ? `Saved to ${list.name}.` : `Removed from ${list.name}.` };
++   });
++ }
++ /**
++  * Creates a list. From a repository's Save menu (with `repo`, a repository id) the repository goes
++  * in it at once and the menu stays open; otherwise the new list's page opens.
++  */
++ export async function createListAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   let path = "";
++   const repoId = String(formData.get("repo") ?? "");
++   const result = await attempt(async () => {
++     const viewer = await viewerOrThrow();
++     const owner = await getUserByUsername(String(formData.get("owner") ?? viewer.username));
++     if (!owner || !(await mayManageLists(owner, viewer.id))) throw new ActionError("You can’t make lists for that account.");
++     const repo = repoId ? await readableRepo(repoId, viewer.id) : null;
++     const list = await createList(owner, listInput(formData));
++     if (repo) {
++       await setInList(list, repo.id, true);
++       revalidatePath(`/${repo.owner}/${repo.name}`, "layout");
++     }
++     refreshList(list);
++     path = listPath(list);
++     return repo ? { success: `Saved to ${list.name}.` } : undefined;
++   });
++   if (result?.error || repoId) return result;
++   redirect(path);
++ }
++ export async function updateListAction(owner: string, slug: string, _prev: FormState, formData: FormData): Promise<FormState> {
++   let path = "";
++   const result = await attempt(async () => {
++     const { list } = await listForAction(await findList(owner, slug));
++     const updated = await updateList(list, listInput(formData));
++     refreshList(list);
++     refreshList(updated);
++     path = listPath(updated);
++   });
++   if (result?.error) return result;
++   redirect(path);
++ }
++ export async function deleteListAction(owner: string, slug: string, _prev: FormState, formData: FormData): Promise<FormState> {
++   let path = "";
++   const result = await attempt(async () => {
++     const { list } = await listForAction(await findList(owner, slug));
++     if (formData.get("confirm") !== list.name) return { error: `Type ${list.name} to confirm.` };
++     await deleteList(list);
++     refreshList(list);
++     path = `/${list.owner.username}?tab=lists`;
++   });
++   if (result?.error) return result;
++   redirect(path);
++ }

+40−0apps/web/app/lists/[owner]/[slug]/edit/page.tsxaddedView File

++ import { forbidden } from "next/navigation";
++ import { deleteListAction, updateListAction } from "@/app/actions/lists";
++ import { PencilIcon } from "@/components/icons";
++ import { DeleteListZone, ListForm } from "@/components/list-form";
++ import { PlateSection } from "@/components/settings-plate";
++ import { getList } from "../load";
++ export async function generateMetadata({ params }: PageProps<"/lists/[owner]/[slug]/edit">) {
++   const { owner, slug } = await params;
++   const { list } = await getList(owner, slug);
++   return { title: `Edit ${list.name}` };
++ }
++ export default async function EditListPage({ params }: PageProps<"/lists/[owner]/[slug]/edit">) {
++   const { owner, slug } = await params;
++   const { list, canManage } = await getList(owner, slug);
++   if (!canManage) forbidden();
++   return (
++     <main className="mx-auto flex w-full max-w-2xl flex-col gap-8 px-4 py-12">
++       <div className="flex items-center gap-4">
++         <span className="icon-tile size-12 shrink-0 rounded-plate [&_svg]:size-[22px]">
++           <PencilIcon />
++         </span>
++         <div>
++           <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Edit {list.name}</h1>
++           <p className="mt-1 type-lead text-ink2">A list of {list.owner.isOrg ? `the organization ${list.owner.username}` : list.owner.username}.</p>
++         </div>
++       </div>
++       <ListForm
++         action={updateListAction.bind(null, list.owner.username, list.slug)}
++         owners={[list.owner.username]}
++         owner={list.owner.username}
++         list={{ name: list.name, description: list.description, visibility: list.visibility }}
++       />
++       <PlateSection title="Danger zone">
++         <DeleteListZone action={deleteListAction.bind(null, list.owner.username, list.slug)} name={list.name} />
++       </PlateSection>
++     </main>
++   );
++ }

+13−0apps/web/app/lists/[owner]/[slug]/load.tsaddedView File

++ import "server-only";
++ import { cache } from "react";
++ import { notFound } from "next/navigation";
++ import { getViewer } from "@/lib/auth";
++ import { findList, mayManageLists, maySeeList } from "@/lib/lists";
++ /** Loads a list for a page. Lists the viewer can't see render the 404 page, like private repositories. */
++ export const getList = cache(async (owner: string, slug: string) => {
++   const list = await findList(owner, slug);
++   const viewer = await getViewer();
++   if (!list || !(await maySeeList(list, viewer?.id))) notFound();
++   return { list, viewer, canManage: await mayManageLists(list.owner, viewer?.id) };
++ });

+73−0apps/web/app/lists/[owner]/[slug]/page.tsxaddedView File

++ import Link from "next/link";
++ import { setSavedAction } from "@/app/actions/lists";
++ import { ActionButton } from "@/components/action-button";
++ import { BookmarkIcon, CalendarIcon, PencilIcon, XIcon } from "@/components/icons";
++ import { RepoList } from "@/components/repo-list";
++ import { Avatar, Blankslate, Box, ButtonLink, Counter, VisibilityLabel } from "@/components/ui";
++ import { formatDate } from "@/lib/format";
++ import { withActivity } from "@/lib/listing";
++ import { listReposInList } from "@/lib/lists";
++ import { getList } from "./load";
++ export async function generateMetadata({ params }: PageProps<"/lists/[owner]/[slug]">) {
++   const { owner, slug } = await params;
++   const { list } = await getList(owner, slug);
++   return { title: `${list.name} · ${list.owner.username}`, description: list.description || undefined };
++ }
++ export default async function ListPage({ params }: PageProps<"/lists/[owner]/[slug]">) {
++   const { owner, slug } = await params;
++   const { list, viewer, canManage } = await getList(owner, slug);
++   const repos = await withActivity(await listReposInList(list.id, viewer?.id ?? null), viewer?.id);
++   return (
++     <main className="mx-auto w-full max-w-5xl px-4 py-10 md:px-6">
++       <div className="mb-8 flex flex-wrap items-start gap-4">
++         <span className="icon-tile size-12 shrink-0 rounded-plate [&_svg]:size-[22px]">
++           <BookmarkIcon />
++         </span>
++         <div className="min-w-0 flex-1">
++           <Link href={`/${list.owner.username}?tab=lists`} className="inline-flex items-center gap-2 type-ui text-ink2 transition-colors hover:text-ink">
++             <Avatar name={list.owner.name || list.owner.username} size={18} /> {list.owner.username}
++           </Link>
++           <h1 className="mt-1 flex flex-wrap items-center gap-2.5 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">
++             {list.name} <VisibilityLabel visibility={list.visibility} />
++           </h1>
++           {list.description && <p className="mt-1.5 max-w-2xl type-lead text-ink2">{list.description}</p>}
++           <p className="mt-2 flex items-center gap-2 type-meta text-ink3">
++             <CalendarIcon width={14} height={14} /> Created {formatDate(list.createdAt)}
++           </p>
++         </div>
++         {canManage && (
++           <ButtonLink href={`/lists/${list.owner.username}/${list.slug}/edit`} icon={<PencilIcon />}>
++             Edit List
++           </ButtonLink>
++         )}
++       </div>
++       <h2 className="mb-4 flex items-center gap-2 type-display text-ink">
++         Repositories <Counter>{repos.length}</Counter>
++       </h2>
++       {repos.length > 0 ? (
++         <RepoList
++           repos={repos}
++           actions={
++             canManage
++               ? (r) => (
++                   <ActionButton action={setSavedAction.bind(null, list.id, r.id, false)} variant="invisible" icon={<XIcon />}>
++                     Remove
++                   </ActionButton>
++                 )
++               : undefined
++           }
++         />
++       ) : (
++         <Box>
++           <Blankslate icon={<BookmarkIcon />} title="This list is empty">
++             {canManage ? "Open a repository and use its Save key to put it in this list." : "Nothing has been saved to it yet."}
++           </Blankslate>
++         </Box>
++       )}
++     </main>
++   );
++ }

+28−0apps/web/app/lists/new/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { createListAction } from "@/app/actions/lists";
++ import { BookmarkIcon } from "@/components/icons";
++ import { ListForm } from "@/components/list-form";
++ import { requireViewer } from "@/lib/auth";
++ import { listOwnersFor } from "@/lib/lists";
++ export const metadata: Metadata = { title: "New list" };
++ export default async function NewListPage({ searchParams }: PageProps<"/lists/new">) {
++   const viewer = await requireViewer("/lists/new");
++   const owners = (await listOwnersFor(viewer)).map((o) => o.username);
++   const wanted = String((await searchParams).owner ?? "").toLowerCase();
++   return (
++     <main className="mx-auto w-full max-w-2xl px-4 py-12">
++       <div className="mb-8 flex items-center gap-4">
++         <span className="icon-tile size-12 shrink-0 rounded-plate [&_svg]:size-[22px]">
++           <BookmarkIcon />
++         </span>
++         <div>
++           <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Create a list</h1>
++           <p className="mt-1 type-lead text-ink2">Gather repositories to find them again or share them. Add one with the Save key on its page.</p>
++         </div>
++       </div>
++       <ListForm action={createListAction} owners={owners} owner={owners.find((o) => o.toLowerCase() === wanted) ?? viewer.username} />
++     </main>
++   );
++ }

+1−1apps/web/app/organizations/[org]/settings/forms.tsxView File

@@ -43,7 +43,7 @@ export function DeleteOrgZone({ action, name }: { action: Action; name: string }
43	43	description="Only an organization without repositories can be deleted. Delete its repositories first."
44	44	consequence={
45	45	<>
46		- This will permanently delete <strong>{name}</strong>, its members and pending invitations. The name becomes free for anyone to take.
	46	+ This will permanently delete <strong>{name}</strong>, its members, lists and pending invitations. The name becomes free for anyone to take.
47	47	</>
48	48	}
49	49	openLabel="Delete Organization"

+32−1apps/web/app/page.tsxView File

@@ -5,12 +5,14 @@ import { HomeTerminal } from "@/components/home-terminal";
5	5	import { OrgInvitations } from "@/components/org-invitations";
6	6	import {
7	7	ArrowRightIcon,
	8	+ BookmarkIcon,
8	9	BranchIcon,
9	10	CodeIcon,
10	11	CommitIcon,
11	12	CompassIcon,
12	13	IssueOpenedIcon,
13	14	KeyIcon,
	15	+ LockIcon,
14	16	OrganizationIcon,
15	17	PencilIcon,
16	18	PeopleIcon,
@@ -24,6 +26,7 @@ import { Avatar, Blankslate, Box, ButtonLink, Counter, Label, RefChip, RepoAvata
24	26	import { getViewer } from "@/lib/auth";
25	27	import { shortSha, timeAgo } from "@/lib/format";
26	28	import { recentActivity, withActivity } from "@/lib/listing";
	29	+ import { listListsOf, listPath } from "@/lib/lists";
27	30	import { listInvitationsFor, listOrgsOf } from "@/lib/orgs";
28	31	import { listReposForUser, searchRepos } from "@/lib/repos";
29	32	import { serverHost } from "@/lib/request-origin";
@@ -127,11 +130,12 @@ function greeting() {
127	130	const liftRow = "rounded-row transition-row outline-none hover:recipe-row-list-hover focus-visible:recipe-row-list-hover focus-visible:focus-ring-flush";
128	131
129	132	async function Dashboard({ viewer }: { viewer: User }) {
130		- const [mine, recent, orgs, invitations] = await Promise.all([
	133	+ const [mine, recent, orgs, invitations, lists] = await Promise.all([
131	134	listReposForUser(viewer.id),
132	135	searchRepos("", viewer.id, 30),
133	136	listOrgsOf(viewer.id),
134	137	listInvitationsFor(viewer.id),
	138	+ listListsOf(viewer, viewer.id),
135	139	]);
136	140	const [activity, explore] = await Promise.all([
137	141	recentActivity(mine),
@@ -173,6 +177,33 @@ async function Dashboard({ viewer }: { viewer: User }) {
173	177	))}
174	178	</ul>
175	179	</Box>
	180	+ <Box className="p-4">
	181	+ <div className="mb-2 flex items-center justify-between gap-2">
	182	+ <h2 className="flex items-center gap-2 type-label engraved">
	183	+ Your lists <Counter>{lists.length}</Counter>
	184	+ </h2>
	185	+ <ButtonLink href="/lists/new" variant="invisible" icon={<PlusIcon />}>
	186	+ New
	187	+ </ButtonLink>
	188	+ </div>
	189	+ {lists.length === 0 && <p className="type-body text-ink3">Save repositories to lists with the Save key on their page, to find them again or share them.</p>}
	190	+ <ul className="-mx-2 flex flex-col gap-0.5">
	191	+ {lists.slice(0, 8).map((list) => (
	192	+ <li key={list.id}>
	193	+ <Link href={listPath(list)} className={`flex items-center gap-2.5 px-2 py-1.5 ${liftRow}`}>
	194	+ <BookmarkIcon width={14} height={14} className="shrink-0 text-ink3" />
	195	+ <span className="min-w-0 flex-1 truncate type-ui text-ink">{list.name}</span>
	196	+ {list.visibility === "private" && <LockIcon width={12} height={12} className="shrink-0 text-ink3" aria-label="Private" />}
	197	+ </Link>
	198	+ </li>
	199	+ ))}
	200	+ </ul>
	201	+ {lists.length > 8 && (
	202	+ <ButtonLink href={`/${viewer.username}?tab=lists`} variant="invisible" icon={<ArrowRightIcon />} className="mt-1 -ml-2">
	203	+ All Lists
	204	+ </ButtonLink>
	205	+ )}
	206	+ </Box>
176	207	</aside>
177	208
178	209	<main className="min-w-0">

+4−0apps/web/components/icons.tsxView File

@@ -152,6 +152,10 @@ export const CommitIcon = icon(
152	152	<path d="M3 12h5.5M15.5 12H21" />
153	153	</>,
154	154	);
	155	+ export const HeartIcon = icon(
	156	+ <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />,
	157	+ );
	158	+ export const BookmarkIcon = icon(<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />);
155	159	export const BookIcon = icon(
156	160	<>
157	161	<path d="M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2z" />

+48−0apps/web/components/list-cards.tsxaddedView File

++ import Link from "next/link";
++ import { Card } from "@unlocalhosted/metalui";
++ import { timeAgo } from "@/lib/format";
++ import { listPath, type RepoList } from "@/lib/lists";
++ import { BookmarkIcon, ClockIcon, RepoIcon } from "./icons";
++ import { CardDescription, CardTitle } from "./metal";
++ import { VisibilityLabel } from "./ui";
++ export type ListCardItem = RepoList & { repoCount: number };
++ /** Lists as cards, like RepoList: the title is the one link. */
++ export function ListCards({ lists, showOwner = false }: { lists: ListCardItem[]; showOwner?: boolean }) {
++   return (
++     <ul className="grid gap-4 sm:grid-cols-2">
++       {lists.map((l) => (
++         <li key={l.id} className="flex">
++           <Card className="w-full grid-rows-[auto_1fr_auto]">
++             <div className="flex items-start gap-3">
++               <span className="icon-tile size-10 shrink-0 rounded-[12px]">
++                 <BookmarkIcon width={18} height={18} />
++               </span>
++               <div className="min-w-0 flex-1">
++                 <CardTitle render={<Link href={listPath(l)} />} className="truncate">
++                   {showOwner && <span className="font-normal text-ink3">{l.owner.username} / </span>}
++                   {l.name}
++                 </CardTitle>
++                 <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
++                   <VisibilityLabel visibility={l.visibility} />
++                 </div>
++               </div>
++             </div>
++             <CardDescription className={`mt-1.5 line-clamp-2 ${l.description ? "" : "text-ink3 italic"}`}>{l.description || "No description"}</CardDescription>
++             <div className="rule-t mt-2 flex items-center gap-3 pt-2.5 type-readout text-ink3">
++               <span className="flex items-center gap-1.5">
++                 <RepoIcon width={12} height={12} />
++                 {l.repoCount} {l.repoCount === 1 ? "repository" : "repositories"}
++               </span>
++               <span className="flex items-center gap-1.5">
++                 <ClockIcon width={12} height={12} />
++                 Updated {timeAgo(l.updatedAt)}
++               </span>
++             </div>
++           </Card>
++         </li>
++       ))}
++     </ul>
++   );
++ }

+92−0apps/web/components/list-form.tsxaddedView File

++ "use client";
++ import { useActionState } from "react";
++ import { Rule, Select } from "@unlocalhosted/metalui";
++ import type { FormState } from "@/app/actions/types";
++ import { DeleteZone } from "./delete-zone";
++ import { BookmarkIcon, GlobeIcon, LockIcon, PlusIcon } from "./icons";
++ import { ChoiceCards, TextareaField, TextField } from "./settings-fields";
++ import { PlateBody, PlateFooter } from "./settings-plate";
++ import { Alert, Avatar, Box, Button } from "./ui";
++ type Action = (prev: FormState, formData: FormData) => Promise<FormState>;
++ export type ListFields = { name: string; description: string; visibility: "public" | "private" };
++ /** A list's name, description and visibility; new lists also choose their owner (you, or an organization). */
++ export function ListForm({ action, owners, owner, list }: { action: Action; owners: string[]; owner: string; list?: ListFields }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   return (
++     <form action={formAction}>
++       <Box>
++         <PlateBody>
++           {!list && (
++             <div className="flex flex-col gap-1.5">
++               <span className="type-ui text-ink">Owner</span>
++               {owners.length > 1 ? (
++                 <Select name="owner" aria-label="Owner" defaultValue={owner} options={owners.map((o) => ({ value: o, label: o }))} className="self-start min-w-36" />
++               ) : (
++                 <span className="flex h-8 items-center gap-2 self-start rounded-[11px] recipe-well-field pr-3.5 pl-2 type-ui text-ink2">
++                   <Avatar name={owner} size={20} /> {owner}
++                   <input type="hidden" name="owner" value={owner} />
++                 </span>
++               )}
++             </div>
++           )}
++           <TextField
++             label="Name"
++             description={list ? "Renaming the list changes its address." : "Its address is made from the name, e.g. /lists/alice/tools-i-use."}
++             name="name"
++             required
++             autoFocus={!list}
++             maxLength={60}
++             defaultValue={list?.name}
++             placeholder="Tools I use"
++           />
++           <TextareaField label="Description" optional name="description" minRows={2} maxLength={300} defaultValue={list?.description} placeholder="What do these repositories have in common?" />
++         </PlateBody>
++         <Rule className="mx-6" />
++         <PlateBody>
++           <div className="flex flex-col gap-1.5">
++             <span id="list-visibility" className="type-ui text-ink">
++               Visibility
++             </span>
++             <ChoiceCards
++               name="visibility"
++               aria-labelledby="list-visibility"
++               defaultValue={list?.visibility ?? "public"}
++               choices={[
++                 { value: "public", icon: <GlobeIcon />, title: "Public", description: "Anyone can see the list. Private repositories in it stay hidden from those who can’t see them." },
++                 { value: "private", icon: <LockIcon />, title: "Private", description: "Only you can see it, or for an organization’s list, its members." },
++               ]}
++             />
++           </div>
++           {state?.error && <Alert>{state.error}</Alert>}
++         </PlateBody>
++         <PlateFooter>
++           <Button variant="primary" icon={list ? <BookmarkIcon /> : <PlusIcon />} disabled={pending}>
++             {list ? (pending ? "Saving…" : "Save List") : pending ? "Creating…" : "Create List"}
++           </Button>
++         </PlateFooter>
++       </Box>
++     </form>
++   );
++ }
++ export function DeleteListZone({ action, name }: { action: Action; name: string }) {
++   return (
++     <DeleteZone
++       action={action}
++       confirmText={name}
++       title="Delete this list"
++       description="The repositories in it stay as they are; only the list goes."
++       consequence={
++         <>
++           This will permanently delete the list <strong>{name}</strong>.
++         </>
++       }
++       openLabel="Delete List"
++       confirmLabel="I Understand, Delete This List"
++     />
++   );
++ }

+78−0apps/web/components/profile-tabs.tsxaddedView File

++ import Link from "next/link";
++ import type { ReactNode } from "react";
++ import { Field } from "@unlocalhosted/metalui";
++ import { BookmarkIcon, HeartIcon, PlusIcon, RepoIcon, SearchIcon } from "./icons";
++ import { FieldIcon, FieldInput } from "./metal";
++ import { ButtonLink, Counter, Segmented, segmentClass } from "./ui";
++ export type ProfileTab = "repositories" | "lists" | "likes";
++ export const profileTab = (value: unknown): ProfileTab => (value === "lists" || value === "likes" ? value : "repositories");
++ const TABS: Record<ProfileTab, { label: string; icon: ReactNode; find: string }> = {
++   repositories: { label: "Repositories", icon: <RepoIcon />, find: "Find a repository…" },
++   lists: { label: "Lists", icon: <BookmarkIcon />, find: "Find a list…" },
++   likes: { label: "Liked", icon: <HeartIcon />, find: "Find a repository…" },
++ };
++ /**
++  * A profile's main column: its tabs (repositories, lists and, for people, the repositories they
++  * like) with their counts, the search box, and a New key for what the tab shows.
++  */
++ export function ProfileTabs({
++   username,
++   tab,
++   counts,
++   q,
++   newHref,
++   children,
++ }: {
++   username: string;
++   tab: ProfileTab;
++   /** Tabs without a count aren't shown. */
++   counts: Partial<Record<ProfileTab, number>>;
++   q: string;
++   newHref?: string | false | null;
++   children: ReactNode;
++ }) {
++   const tabs = (Object.keys(TABS) as ProfileTab[]).filter((t) => counts[t] !== undefined);
++   return (
++     <section>
++       <div className="mb-5 flex flex-wrap items-center gap-3">
++         <Segmented className="max-w-full overflow-x-auto">
++           {tabs.map((t) => (
++             <Link
++               key={t}
++               href={t === "repositories" ? `/${username}` : `/${username}?tab=${t}`}
++               className={segmentClass(t === tab)}
++               aria-current={t === tab ? "page" : undefined}
++             >
++               {TABS[t].icon} {TABS[t].label} <Counter>{counts[t]}</Counter>
++             </Link>
++           ))}
++         </Segmented>
++         <div className="ml-auto flex w-full items-center gap-2 sm:w-auto">
++           <form role="search" className="flex-1 sm:w-72">
++             {tab !== "repositories" && <input type="hidden" name="tab" value={tab} />}
++             <Field size="regular">
++               <FieldIcon>
++                 <SearchIcon />
++               </FieldIcon>
++               <FieldInput name="q" defaultValue={q} placeholder={TABS[tab].find} aria-label={TABS[tab].find.slice(0, -1)} />
++             </Field>
++           </form>
++           {newHref && (
++             <ButtonLink href={newHref} variant="primary" icon={<PlusIcon />}>
++               New
++             </ButtonLink>
++           )}
++         </div>
++       </div>
++       {children}
++     </section>
++   );
++ }
++ /** Whether a repository or list matches the profile's search. */
++ export const matches = (q: string, item: { name: string; description: string }) =>
++   !q || item.name.toLowerCase().includes(q) || item.description.toLowerCase().includes(q);

+20−8apps/web/components/repo-list.tsxView File

@@ -1,16 +1,20 @@
1	1	import Link from "next/link";
2	2	import { Card } from "@unlocalhosted/metalui";
	3	+ import type { ReactNode } from "react";
3	4	import type { ForkParent, RepoRecord } from "@/lib/repos";
4	5	import { timeAgo } from "@/lib/format";
5		- import { ClockIcon, LockIcon, RepoIcon } from "./icons";
	6	+ import { ClockIcon, HeartIcon, LockIcon, RepoIcon } from "./icons";
6	7	import { ForkedFrom, ForkLabel } from "./forks";
7	8	import { CardDescription, CardTitle } from "./metal";
8	9	import { RepoAvatar, VisibilityLabel } from "./ui";
9	10
10		- export type RepoListItem = RepoRecord & { updatedAt: number; empty: boolean; parent: ForkParent \| null };
	11	+ export type RepoListItem = RepoRecord & { updatedAt: number; empty: boolean; parent: ForkParent \| null; likes: number };
11	12
12		- /** Repositories as MetalUI cards: the title is the card's one link, so the whole plate goes to the repository. */
13		- export function RepoList({ repos, showOwner = true }: { repos: RepoListItem[]; showOwner?: boolean }) {
	13	+ /**
	14	+ * Repositories as MetalUI cards: the title is the card's one link, so the whole plate goes to the
	15	+ * repository. `actions` adds controls to a card's footer (they sit above the link).
	16	+ */
	17	+ export function RepoList({ repos, showOwner = true, actions }: { repos: RepoListItem[]; showOwner?: boolean; actions?: (repo: RepoListItem) => ReactNode }) {
14	18	return (
15	19	<ul className="grid gap-4 sm:grid-cols-2">
16	20	{repos.map((r) => (
@@ -33,10 +37,18 @@ export function RepoList({ repos, showOwner = true }: { repos: RepoListItem[]; s
33	37	<CardDescription className={`mt-1.5 line-clamp-2 ${r.description ? "" : "text-ink3 italic"}`}>
34	38	{r.description \|\| "No description"}
35	39	</CardDescription>
36		- <p className="rule-t mt-2 flex items-center gap-1.5 pt-2.5 type-readout text-ink3">
37		- <ClockIcon width={12} height={12} />
38		- {r.empty ? "Empty repository" : `Updated ${timeAgo(r.updatedAt)}`}
39		- </p>
	40	+ <div className="rule-t mt-2 flex items-center gap-3 pt-2.5 type-readout text-ink3">
	41	+ <span className="flex items-center gap-1.5">
	42	+ <ClockIcon width={12} height={12} />
	43	+ {r.empty ? "Empty repository" : `Updated ${timeAgo(r.updatedAt)}`}
	44	+ </span>
	45	+ {r.likes > 0 && (
	46	+ <span className="flex items-center gap-1" title={`${r.likes} ${r.likes === 1 ? "like" : "likes"}`}>
	47	+ <HeartIcon width={12} height={12} /> {r.likes}
	48	+ </span>
	49	+ )}
	50	+ {actions && <div className="relative z-1 ml-auto flex items-center gap-2">{actions(r)}</div>}
	51	+ </div>
40	52	</Card>
41	53	</li>
42	54	))}

+138−0apps/web/components/repo-save.tsxaddedView File

++ "use client";
++ import { useActionState, useOptimistic, useState, useTransition } from "react";
++ import { Button, Checkbox, Field, Popover, Rule, Select, Toggle, useToast } from "@unlocalhosted/metalui";
++ import { createListAction, setLikedAction, setSavedAction } from "@/app/actions/lists";
++ import type { FormState } from "@/app/actions/types";
++ import { BookmarkIcon, ChevronDownIcon, HeartIcon, LockIcon, PlusIcon } from "./icons";
++ import { ButtonLink } from "./ui";
++ /** The repository's Like key: latched (a filled heart) while the viewer likes it. Signed out, it leads to signing in. */
++ export function LikeButton({ owner, name, liked, signedIn }: { owner: string; name: string; liked: boolean; signedIn: boolean }) {
++   const toast = useToast();
++   const [pressed, setPressed] = useOptimistic(liked);
++   const [, startTransition] = useTransition();
++   if (!signedIn) {
++     return (
++       <ButtonLink href={`/login?next=${encodeURIComponent(`/${owner}/${name}`)}`} icon={<HeartIcon />}>
++         Like
++       </ButtonLink>
++     );
++   }
++   return (
++     <Toggle
++       lamp={false}
++       pressed={pressed}
++       aria-label={pressed ? "Unlike" : "Like"}
++       onPressedChange={(next) =>
++         startTransition(async () => {
++           setPressed(next);
++           const result = await setLikedAction(owner, name, next);
++           if (result?.error) toast.show({ title: result.error, tone: "error" });
++         })
++       }
++     >
++       <HeartIcon fill={pressed ? "currentColor" : "none"} className={pressed ? "text-red" : ""} />
++       {pressed ? "Liked" : "Like"}
++     </Toggle>
++   );
++ }
++ export type SaveTarget = { id: string; owner: string; name: string; visibility: "public" | "private"; saved: boolean };
++ /**
++  * The repository's Save key: a popover with the lists the viewer may change (theirs and their
++  * organizations'), ticked where the repository is in them, and a field to make a new list with it.
++  */
++ export function SaveButton({ repoId, lists, owners, viewer }: { repoId: string; lists: SaveTarget[]; owners: string[]; viewer: string }) {
++   const toast = useToast();
++   const [shown, setSaved] = useOptimistic(lists, (state, change: { id: string; saved: boolean }) =>
++     state.map((l) => (l.id === change.id ? { ...l, saved: change.saved } : l)),
++   );
++   const [, startTransition] = useTransition();
++   const anySaved = shown.some((l) => l.saved);
++   const byOwner = owners.map((owner) => ({ owner, lists: shown.filter((l) => l.owner === owner) })).filter((g) => g.lists.length > 0);
++   const toggle = (list: SaveTarget, saved: boolean) =>
++     startTransition(async () => {
++       setSaved({ id: list.id, saved });
++       const result = await setSavedAction(list.id, repoId, saved);
++       if (result?.error) toast.show({ title: result.error, tone: "error" });
++     });
++   return (
++     <Popover>
++       <Popover.Trigger>
++         <Button icon={<BookmarkIcon fill={anySaved ? "currentColor" : "none"} />}>
++           {anySaved ? "Saved" : "Save"}
++           <span aria-hidden className="-mr-1 inline-grid opacity-70">
++             <ChevronDownIcon width={12} height={12} />
++           </span>
++         </Button>
++       </Popover.Trigger>
++       <Popover.Content side="bottom" align="end" className="w-[300px]">
++         <Popover.Title className="flex items-center gap-2">
++           <BookmarkIcon width={14} height={14} className="text-ink2" /> Save to a list
++         </Popover.Title>
++         <Popover.Body className="flex flex-col gap-3">
++           {byOwner.length === 0 && <p className="type-body text-ink3">Lists gather repositories you want to find again or share. Make your first one below.</p>}
++           {byOwner.map((group) => (
++             <div key={group.owner} className="flex flex-col gap-0.5">
++               {owners.length > 1 && <p className="px-1 pb-1 type-label engraved">{group.owner === viewer ? "Your lists" : group.owner}</p>}
++               <ul className="flex max-h-56 flex-col gap-0.5 overflow-y-auto">
++                 {group.lists.map((list) => (
++                   <li key={list.id}>
++                     <label className="flex cursor-pointer items-center gap-2.5 rounded-[10px] px-1.5 py-1.5 transition-row hover:recipe-row-list-hover">
++                       <Checkbox size="row" checked={list.saved} onCheckedChange={(checked) => toggle(list, checked)} />
++                       <span className="min-w-0 flex-1 truncate type-ui text-ink">{list.name}</span>
++                       {list.visibility === "private" && <LockIcon width={12} height={12} className="shrink-0 text-ink3" aria-label="Private" />}
++                     </label>
++                   </li>
++                 ))}
++               </ul>
++             </div>
++           ))}
++           <Rule />
++           <NewListForm repoId={repoId} owners={owners} viewer={viewer} />
++         </Popover.Body>
++       </Popover.Content>
++     </Popover>
++   );
++ }
++ /** Makes a list with the repository in it, without leaving the page. */
++ function NewListForm({ repoId, owners, viewer }: { repoId: string; owners: string[]; viewer: string }) {
++   const toast = useToast();
++   const [created, setCreated] = useState(0);
++   const [, action, pending] = useActionState(async (prev: FormState, formData: FormData) => {
++     const result = await createListAction(prev, formData);
++     if (result?.error) toast.show({ title: result.error, tone: "error" });
++     else {
++       if (result?.success) toast.show({ title: result.success, tone: "success" });
++       setCreated((n) => n + 1);
++     }
++     return result;
++   }, undefined);
++   return (
++     // A new key empties the fields once the list is made.
++     <form key={created} action={action} className="flex flex-col gap-2.5">
++       <input type="hidden" name="repo" value={repoId} />
++       <Field size="regular">
++         <Field.Input name="name" required maxLength={60} placeholder="New list, e.g. Tools I use" aria-label="New list name" />
++       </Field>
++       <div className="flex flex-wrap items-center gap-2">
++         {owners.length > 1 ? (
++           <Select name="owner" aria-label="Owner of the list" size="compact" defaultValue={viewer} options={owners.map((o) => ({ value: o, label: o }))} className="min-w-24" />
++         ) : (
++           <input type="hidden" name="owner" value={viewer} />
++         )}
++         <label className="flex cursor-pointer items-center gap-2 type-ui text-ink2">
++           <Checkbox name="visibility" value="private" /> Private
++         </label>
++         <Button type="submit" size="compact" icon={<PlusIcon />} disabled={pending} className="ml-auto">
++           {pending ? "Creating…" : "Create"}
++         </Button>
++       </div>
++     </form>
++   );
++ }

+1−1apps/web/lib/git.tsView File

@@ -11,7 +11,7 @@ import { DATA_ROOT, REPOS_ROOT, WIKIS_ROOT } from "./paths";
11	11	const NAME_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/;
12	12	const RESERVED = new Set([
13	13	"new", "api", "_next", "favicon.ico", "login", "logout", "signup", "settings", "explore", "about", "admin", "v2",
14		- "mcp", "oauth", "organizations",
	14	+ "mcp", "oauth", "organizations", "lists",
15	15	]);
16	16
17	17	export function isValidName(name: string) {

+7−3apps/web/lib/listing.tsView File

@@ -1,13 +1,17 @@
1	1	import "server-only";
2	2	import { lastActivity, log, type Commit } from "./git";
	3	+ import { countLikes } from "./lists";
3	4	import { visibleParent, type RepoRecord } from "./repos";
4	5
5		- /** Adds last-activity info to repositories for list views, and for forks the repository they came from if the viewer may see it. */
	6	+ /**
	7	+ * Adds last-activity info and the number of likes to repositories for list views, and for forks the
	8	+ * repository they came from if the viewer may see it.
	9	+ */
6	10	export async function withActivity(repos: RepoRecord[], viewerId?: string \| null) {
7	11	return Promise.all(
8	12	repos.map(async (r) => {
9		- const [last, parent] = await Promise.all([lastActivity(r.dir), visibleParent(r, viewerId)]);
10		- return { ...r, updatedAt: last ?? r.createdAt, empty: last === null, parent };
	13	+ const [last, parent, likes] = await Promise.all([lastActivity(r.dir), visibleParent(r, viewerId), countLikes(r.id)]);
	14	+ return { ...r, updatedAt: last ?? r.createdAt, empty: last === null, parent, likes };
11	15	}),
12	16	);
13	17	}

+249−0apps/web/lib/lists.tsaddedView File

++ import { count, db, filter, findById, findFirst, isUniqueViolation, type RecordModel } from "./db";
++ import { listOrgsOf, orgRole, roleAtLeast } from "./orgs";
++ import { REPO_EXPAND, repoAccess, toRepo, visibleTo, type RepoRecord, type Visibility } from "./repos";
++ import { toUser, type User } from "./users";
++ // Likes and lists of repositories (see pb_migrations/1791500000_lists.js). A person likes a
++ // repository once; people and organizations keep lists of repositories, public or private. Lists
++ // only ever show a viewer the repositories they may see.
++ export class ListError extends Error {}
++ // ---------------------------------------------------------------------------
++ // Likes
++ export async function countLikes(repoId: string) {
++   return count("repo_likes", filter("repo = {:repoId}", { repoId }));
++ }
++ export async function likes(repoId: string, userId: string | null | undefined) {
++   if (!userId) return false;
++   return !!(await findFirst("repo_likes", filter("repo = {:repoId} && user = {:userId}", { repoId, userId }), { fields: "id" }));
++ }
++ /** Likes or unlikes a repository the person can see. */
++ export async function setLiked(repo: RepoRecord, user: User, liked: boolean) {
++   if (user.isOrg || !(await repoAccess(repo, user.id))) throw new ListError("Repository not found.");
++   const row = await findFirst("repo_likes", filter("repo = {:repoId} && user = {:userId}", { repoId: repo.id, userId: user.id }), { fields: "id" });
++   if (liked && !row) {
++     try {
++       await (await db()).collection("repo_likes").create({ repo: repo.id, user: user.id, created_at: Date.now() });
++     } catch (e) {
++       // Liked twice at once.
++       if (!isUniqueViolation(e)) throw e;
++     }
++   } else if (!liked && row) {
++     await (await db()).collection("repo_likes").delete(row.id);
++   }
++ }
++ /** The repositories a person likes that the viewer may see, the latest liked first. */
++ export async function listLikedRepos(userId: string, viewerId: string | null) {
++   const rows = await (await db()).collection("repo_likes").getFullList({
++     filter: `${filter("user = {:userId}", { userId })} && ${visibleTo(viewerId, "repo.")}`,
++     sort: "-created_at",
++     expand: expandVia("repo"),
++   });
++   return rows.map((r) => toRepo(r.expand?.repo as RecordModel));
++ }
++ export async function countLikedRepos(userId: string, viewerId: string | null) {
++   return count("repo_likes", `${filter("user = {:userId}", { userId })} && ${visibleTo(viewerId, "repo.")}`);
++ }
++ /** The people who like a repository, the latest first. */
++ export async function listLikers(repoId: string) {
++   const rows = await (await db()).collection("repo_likes").getFullList({ filter: filter("repo = {:repoId}", { repoId }), sort: "-created_at", expand: "user" });
++   return rows.map((r) => ({ user: toUser(r.expand?.user as RecordModel), likedAt: r.created_at as number }));
++ }
++ /** REPO_EXPAND, for a record that points at a repository through `field`. */
++ const expandVia = (field: string) => [field, ...REPO_EXPAND.split(",").map((e) => `${field}.${e}`)].join(",");
++ // ---------------------------------------------------------------------------
++ // Lists
++ export type RepoList = {
++   id: string;
++   owner: User;
++   name: string;
++   slug: string;
++   description: string;
++   visibility: Visibility;
++   createdAt: number;
++   updatedAt: number;
++ };
++ const lists = async () => (await db()).collection("repo_lists");
++ const items = async () => (await db()).collection("repo_list_items");
++ function toList(r: RecordModel): RepoList {
++   return {
++     id: r.id,
++     owner: toUser(r.expand?.owner as RecordModel),
++     name: r.name,
++     slug: r.slug,
++     description: r.description,
++     visibility: r.visibility,
++     createdAt: r.created_at,
++     updatedAt: r.updated_at,
++   };
++ }
++ /** A list's address: its name in lowercase, words joined by hyphens. */
++ export function listSlug(name: string) {
++   return name
++     .toLowerCase()
++     .normalize("NFKD")
++     .replace(/[̀-ͯ]/g, "")
++     .replace(/[^a-z0-9]+/g, "-")
++     .replace(/^-+|-+$/g, "")
++     .slice(0, 60)
++     .replace(/-+$/, "");
++ }
++ export const listPath = (list: Pick<RepoList, "owner" | "slug">) => `/lists/${list.owner.username}/${list.slug}`;
++ /** Whether someone sees an account's private lists: the person themselves, or the organization's members. */
++ async function seesPrivateLists(owner: User, viewerId: string | null | undefined) {
++   if (!viewerId) return false;
++   return owner.id === viewerId || (owner.isOrg && !!(await orgRole(owner.id, viewerId)));
++ }
++ /** Whether someone may see a list: anyone a public one, and private ones as seesPrivateLists says. */
++ export async function maySeeList(list: RepoList, viewerId: string | null | undefined) {
++   return list.visibility === "public" || seesPrivateLists(list.owner, viewerId);
++ }
++ /** Whether someone may change an owner's lists: their own, and those of organizations they can push in. */
++ export async function mayManageLists(owner: User, viewerId: string | null | undefined) {
++   if (!viewerId) return false;
++   return owner.id === viewerId || (owner.isOrg && roleAtLeast(await orgRole(owner.id, viewerId), "write"));
++ }
++ /** Accounts whose lists a person may change: their own, and organizations they can push in. */
++ export async function listOwnersFor(user: User) {
++   const orgs = (await listOrgsOf(user.id)).filter((m) => roleAtLeast(m.role, "write")).map((m) => m.org);
++   return [user, ...orgs];
++ }
++ export async function findList(owner: string, slug: string) {
++   const row = await findFirst(
++     "repo_lists",
++     filter("owner.username:lower = {:owner} && slug = {:slug}", { owner: owner.toLowerCase(), slug: slug.toLowerCase() }),
++     { expand: "owner" },
++   );
++   return row ? toList(row) : null;
++ }
++ export async function findListById(id: string) {
++   const row = await findById("repo_lists", id, { expand: "owner" });
++   return row ? toList(row) : null;
++ }
++ /** An account's lists the viewer may see, the most recently changed first. */
++ export async function listListsOf(owner: User, viewerId: string | null) {
++   const where = filter("owner = {:ownerId}", { ownerId: owner.id });
++   const rows = await (await lists()).getFullList({
++     filter: (await seesPrivateLists(owner, viewerId)) ? where : `${where} && visibility = 'public'`,
++     sort: "-updated_at",
++     expand: "owner",
++   });
++   return rows.map(toList);
++ }
++ /** Lists with how many of their repositories the viewer may see. */
++ export async function withRepoCounts(lists: RepoList[], viewerId: string | null) {
++   return Promise.all(lists.map(async (list) => ({ ...list, repoCount: await countListRepos(list.id, viewerId) })));
++ }
++ export async function countListRepos(listId: string, viewerId: string | null) {
++   return count("repo_list_items", `${filter("list = {:listId}", { listId })} && ${visibleTo(viewerId, "repo.")}`);
++ }
++ /** The repositories in a list that the viewer may see, the latest added first. */
++ export async function listReposInList(listId: string, viewerId: string | null) {
++   const rows = await (await items()).getFullList({
++     filter: `${filter("list = {:listId}", { listId })} && ${visibleTo(viewerId, "repo.")}`,
++     sort: "-created_at",
++     expand: expandVia("repo"),
++   });
++   return rows.map((r) => toRepo(r.expand?.repo as RecordModel));
++ }
++ type ListInput = { name: string; description: string; visibility: Visibility };
++ function checkInput(input: ListInput) {
++   const name = input.name.trim().replace(/\s+/g, " ");
++   if (!name) throw new ListError("Give the list a name.");
++   if (name.length > 60) throw new ListError("List names can be at most 60 characters.");
++   const slug = listSlug(name);
++   if (!slug) throw new ListError("List names need at least one letter or digit.");
++   if (input.visibility !== "public" && input.visibility !== "private") throw new ListError("Choose who can see the list.");
++   return { name, slug, description: input.description.trim().slice(0, 300), visibility: input.visibility };
++ }
++ const nameTaken = (owner: User, name: string) =>
++   new ListError(`${owner.isOrg ? `${owner.username} already has` : "You already have"} a list named ${name}, or one with the same address.`);
++ export async function createList(owner: User, input: ListInput) {
++   const data = checkInput(input);
++   const now = Date.now();
++   try {
++     const record = await (await lists()).create({ owner: owner.id, ...data, created_at: now, updated_at: now }, { expand: "owner" });
++     return toList(record);
++   } catch (e) {
++     if (isUniqueViolation(e)) throw nameTaken(owner, data.name);
++     throw e;
++   }
++ }
++ /** Changes a list; renaming it changes its address. */
++ export async function updateList(list: RepoList, input: ListInput) {
++   const data = checkInput(input);
++   try {
++     return toList(await (await lists()).update(list.id, data, { expand: "owner" }));
++   } catch (e) {
++     if (isUniqueViolation(e)) throw nameTaken(list.owner, data.name);
++     throw e;
++   }
++ }
++ /** Deletes a list; PocketBase removes its items with it. The repositories stay. */
++ export async function deleteList(list: RepoList) {
++   await (await lists()).delete(list.id);
++ }
++ /** Puts a repository in a list, or takes it out. */
++ export async function setInList(list: RepoList, repoId: string, inList: boolean) {
++   const row = await findFirst("repo_list_items", filter("list = {:listId} && repo = {:repoId}", { listId: list.id, repoId }), { fields: "id" });
++   if (inList && !row) {
++     try {
++       await (await items()).create({ list: list.id, repo: repoId, created_at: Date.now() });
++     } catch (e) {
++       // Added twice at once.
++       if (!isUniqueViolation(e)) throw e;
++     }
++     await (await lists()).update(list.id, { updated_at: Date.now() });
++   } else if (!inList && row) {
++     await (await items()).delete(row.id);
++   }
++ }
++ /** The lists a person may change, and whether each holds the repository: for the Save menu. */
++ export async function saveTargets(user: User, repoId: string) {
++   const owners = await listOwnersFor(user);
++   const ofOwners = (field: string) => `(${owners.map((o) => filter(`${field} = {:id}`, { id: o.id })).join(" || ")})`;
++   const [rows, saved] = await Promise.all([
++     (await lists()).getFullList({ filter: ofOwners("owner"), expand: "owner" }),
++     (await items()).getFullList({ filter: `${filter("repo = {:repoId}", { repoId })} && ${ofOwners("list.owner")}`, fields: "list" }),
++   ]);
++   const savedIn = new Set(saved.map((r) => r.list as string));
++   const order = owners.map((o) => o.id);
++   return {
++     owners,
++     lists: rows
++       .map((r) => ({ ...toList(r), saved: savedIn.has(r.id) }))
++       .sort((a, b) => order.indexOf(a.owner.id) - order.indexOf(b.owner.id) || a.name.localeCompare(b.name)),
++   };
++ }

+13−9apps/web/lib/repos.tsView File

@@ -49,9 +49,10 @@ export type RepoRecord = {
49	49	wikiDir: string;
50	50	};
51	51
52		- const EXPAND = "owner,fork_of.owner";
	52	+ export const REPO_EXPAND = "owner,fork_of.owner";
53	53
54		- function toRepo(r: RecordModel): RepoRecord {
	54	+ /** A repository from its record, expanded with REPO_EXPAND. */
	55	+ export function toRepo(r: RecordModel): RepoRecord {
55	56	const ownerRecord = r.expand?.owner as RecordModel;
56	57	const owner = ownerRecord.username as string;
57	58	const parent = r.expand?.fork_of as RecordModel \| undefined;
@@ -84,13 +85,13 @@ export async function findRepo(owner: string, name: string) {
84	85	const row = await findFirst(
85	86	"repos",
86	87	filter("owner.username:lower = {:owner} && name:lower = {:name}", { owner: owner.toLowerCase(), name: name.toLowerCase() }),
87		- { expand: EXPAND },
	88	+ { expand: REPO_EXPAND },
88	89	);
89	90	return row ? toRepo(row) : null;
90	91	}
91	92
92	93	export async function findRepoById(id: string) {
93		- const row = await findById("repos", id, { expand: EXPAND });
	94	+ const row = await findById("repos", id, { expand: REPO_EXPAND });
94	95	return row ? toRepo(row) : null;
95	96	}
96	97
@@ -139,17 +140,20 @@ export async function visibleParent(repo: RepoRecord, viewerId: string \| null \|
139	140	return repo.forkOf && (await repoAccess(repo.forkOf, viewerId)) ? repo.forkOf : null;
140	141	}
141	142
142		- /** Repos a user may see: public ones, their own, ones they collaborate on, and their organizations'. */
143		- const visibleTo = (viewerId: string \| null) =>
	143	+ /**
	144	+ * Repos a user may see: public ones, their own, ones they collaborate on, and their organizations'.
	145	+ * `via` filters records that point at a repository instead, e.g. "repo." for those with a `repo` field.
	146	+ */
	147	+ export const visibleTo = (viewerId: string \| null, via = "") =>
144	148	viewerId
145	149	? filter(
146		- "(visibility = 'public' \|\| owner = {:viewer} \|\| collaborators_via_repo.user ?= {:viewer} \|\| owner.org_members_via_org.user ?= {:viewer})",
	150	+ `(${via}visibility = 'public' \|\| ${via}owner = {:viewer} \|\| ${via}collaborators_via_repo.user ?= {:viewer} \|\| ${via}owner.org_members_via_org.user ?= {:viewer})`,
147	151	{ viewer: viewerId },
148	152	)
149		- : "visibility = 'public'";
	153	+ : `${via}visibility = 'public'`;
150	154
151	155	async function list(where: string, limit?: number) {
152		- const options = { filter: where, sort: "-activity_at", expand: EXPAND };
	156	+ const options = { filter: where, sort: "-activity_at", expand: REPO_EXPAND };
153	157	const rows = limit ? (await (await repos()).getList(1, limit, { ...options, skipTotal: true })).items : await (await repos()).getFullList(options);
154	158	return rows.map(toRepo);
155	159	}

+79−0apps/web/pb_migrations/1791500000_lists.jsaddedView File

++ // Likes and lists of repositories.
++ //
++ // `repo_likes`: a person likes a repository, once. A repository shows how many people like it, and
++ // a person's profile the repositories they like.
++ //
++ // `repo_lists`: named collections of repositories that a person or an organization keeps, public
++ // (anyone can see them) or private (only that person, or the organization's members). `slug` is the
++ // list's address under /lists/<owner>/<slug>, made from its name. `repo_list_items` puts a
++ // repository in a list; a list never shows anyone a repository they couldn't see anyway.
++ const text = (name, opts = {}) => ({ type: "text", name, max: 1000, ...opts });
++ const number = (name, opts = {}) => ({ type: "number", name, onlyInt: true, ...opts });
++ const time = (name, opts = {}) => number(name, { min: 0, ...opts });
++ const select = (name, values, opts = {}) => ({ type: "select", name, values, maxSelect: 1, required: true, ...opts });
++ const relation = (name, collection, opts = {}) => ({
++   type: "relation",
++   name,
++   collectionId: collection.id,
++   maxSelect: 1,
++   cascadeDelete: false,
++   ...opts,
++ });
++ const parent = (name, collection) => relation(name, collection, { required: true, cascadeDelete: true });
++ function create(app, name, fields, indexes = []) {
++   const collection = new Collection({
++     type: "base",
++     name,
++     listRule: null,
++     viewRule: null,
++     createRule: null,
++     updateRule: null,
++     deleteRule: null,
++     fields,
++     indexes,
++   });
++   app.save(collection);
++   return collection;
++ }
++ migrate(
++   (app) => {
++     const users = app.findCollectionByNameOrId("users");
++     const repos = app.findCollectionByNameOrId("repos");
++     create(
++       app,
++       "repo_likes",
++       [parent("repo", repos), parent("user", users), time("created_at", { required: true })],
++       ["CREATE UNIQUE INDEX idx_repo_likes ON repo_likes (repo, user)", "CREATE INDEX idx_repo_likes_user ON repo_likes (user, created_at)"],
++     );
++     const lists = create(
++       app,
++       "repo_lists",
++       [
++         parent("owner", users),
++         text("name", { required: true, max: 60 }),
++         text("slug", { required: true, max: 60 }),
++         text("description", { max: 300 }),
++         select("visibility", ["public", "private"]),
++         time("created_at", { required: true }),
++         // When a repository was last added, or the list was made; lists are sorted by it.
++         time("updated_at", { required: true }),
++       ],
++       ["CREATE UNIQUE INDEX idx_repo_lists_slug ON repo_lists (owner, slug)"],
++     );
++     create(
++       app,
++       "repo_list_items",
++       [parent("list", lists), parent("repo", repos), time("created_at", { required: true })],
++       ["CREATE UNIQUE INDEX idx_repo_list_items ON repo_list_items (list, repo)", "CREATE INDEX idx_repo_list_items_repo ON repo_list_items (repo)"],
++     );
++   },
++   (app) => {
++     for (const name of ["repo_list_items", "repo_lists", "repo_likes"]) app.delete(app.findCollectionByNameOrId(name));
++   },
++ );

+1−1apps/web/scripts/create-user.mjsView File

@@ -19,7 +19,7 @@ if (!username \|\| !email) {
19	19	// The same rules as createUser() in lib/users.ts and isValidOwner() in lib/git.ts.
20	20	const RESERVED = new Set([
21	21	"new", "api", "_next", "favicon.ico", "login", "logout", "signup", "settings", "explore", "about", "admin", "v2",
22		- "mcp", "oauth", "organizations",
	22	+ "mcp", "oauth", "organizations", "lists",
23	23	]);
24	24	const fail = (message) => (console.error(message), process.exit(1));
25	25	if (!/^[A-Za-z0-9](?:[A-Za-z0-9-]{0,38})$/.test(username) \|\| RESERVED.has(username.toLowerCase())) {

+1−0docs/features.mdView File

@@ -5,6 +5,7 @@
5	5	- Repositories: public or private, rename, delete, optional README on creation
6	6	- Collaborators: give other users push access to a repository
7	7	- Organizations, like on GitHub: accounts that own repositories for a team, at `/<org>/<repo>`. Whoever creates one is its owner and invites people by username (Settings → Organizations, or the organization's Members settings). Invited people accept or decline from their dashboard. Each member has a role that applies to all of the organization's repositories: Read (sees them, private ones too), Write (pushes, manages issues and pull requests), Admin (also creates repositories, changes their settings and deletes them) or Owner (also manages the organization, its members and invitations). Owners change roles and remove members at any time; an organization always keeps at least one owner. Single repositories can still add outside collaborators. Agents can create repositories in organizations where their person is an admin or owner (`create_repository` with `owner`)
	8	+ - Likes and lists: anyone signed in can Like a repository they can see; the repository shows how many people like it (and who, under likes), and a person's profile lists what they like under Liked. The Save key puts a repository in lists, or makes a new one on the spot. Lists belong to a person or an organization, live at `/lists/<owner>/<list>` and on the profile's Lists tab, and are public (anyone can see them) or private (only that person, or the organization's members). Members with Write or more manage an organization's lists. A list never shows a repository to someone who couldn't see it anyway, so private repositories can go in public lists
8	9	- Forks: anyone who can read a repository can fork it (the Fork button) into a copy of their own, of its default branch or all branches. Forks carry a Fork label and a "forked from" link everywhere they're listed, and the original lists them under Forks. A fork's front page says how far it is ahead of and behind the original, with Sync Fork (a fast-forward, or a merge commit if the fork has commits of its own) and Contribute (a pull request back). Forks of private repositories stay private
9	10	- Git over SSH: built-in SSH server (default port 2222). Add public keys under Settings → SSH keys
10	11	- Git over HTTPS: smart HTTP protocol (v0 and v2). Authenticate with API tokens

+1−0docs/layout.mdView File

@@ -18,6 +18,7 @@ Paths are relative to `apps/web`.
18	18	- `lib/users.ts`, `lib/auth.ts`: accounts and sessions (PocketBase auth records and tokens); `lib/totp.ts`, `lib/two-factor.ts`: two-factor authentication with an authenticator app
19	19	- `lib/repos.ts`: repository records, permissions (`repoAccess`), collaborators
20	20	- `lib/orgs.ts`, `lib/org-roles.ts`: organizations (accounts in `users` with kind "org"), their members' roles and invitations; UI in `app/organizations/` and `app/settings/organizations/`
	21	+ - `lib/lists.ts`: likes and lists of repositories; UI in `app/lists/`, `components/repo-save.tsx` (the Like and Save keys) and the profile's tabs (`app/[owner]/tabs.tsx`)
21	22	- `lib/issues.ts`, `lib/issue-meta.ts`: issue tracker data and its shared vocabulary (statuses, priorities); UI in `components/issues/`
22	23	- `lib/keys.ts`, `lib/tokens.ts`: SSH keys and API tokens
23	24	- `lib/oauth.ts`, `lib/oauth-rules.ts`: the OAuth 2.1 authorization server for agents (`app/oauth/`, `app/.well-known/`); `lib/mcp/*`: the MCP endpoint (`app/mcp`) and its tools

@@ -5,6 +5,7 @@
5	5	- Repositories: public or private, rename, delete, optional README on creation
6	6	- Collaborators: give other users push access to a repository
7	7	- Organizations, like on GitHub: accounts that own repositories for a team, at `/<org>/<repo>`. Whoever creates one is its owner and invites people by username (Settings → Organizations, or the organization's Members settings). Invited people accept or decline from their dashboard. Each member has a role that applies to all of the organization's repositories: Read (sees them, private ones too), Write (pushes, manages issues and pull requests), Admin (also creates repositories, changes their settings and deletes them) or Owner (also manages the organization, its members and invitations). Owners change roles and remove members at any time; an organization always keeps at least one owner. Single repositories can still add outside collaborators. Agents can create repositories in organizations where their person is an admin or owner (`create_repository` with `owner`)
	8	+ - Likes and lists: anyone signed in can Like a repository they can see; the repository shows how many people like it (and who, under likes), and a person's profile lists what they like under Liked. The Save key puts a repository in lists, or makes a new one on the spot. Lists belong to a person or an organization, live at `/lists/<owner>/<list>` and on the profile's Lists tab, and are public (anyone can see them) or private (only that person, or the organization's members). Members with Write or more manage an organization's lists. A list never shows a repository to someone who couldn't see it anyway, so private repositories can go in public lists
8	9	- Forks: anyone who can read a repository can fork it (the Fork button) into a copy of their own, of its default branch or all branches. Forks carry a Fork label and a "forked from" link everywhere they're listed, and the original lists them under Forks. A fork's front page says how far it is ahead of and behind the original, with Sync Fork (a fast-forward, or a merge commit if the fork has commits of its own) and Contribute (a pull request back). Forks of private repositories stay private
9	10	- Git over SSH: built-in SSH server (default port 2222). Add public keys under Settings → SSH keys
10	11	- Git over HTTPS: smart HTTP protocol (v0 and v2). Authenticate with API tokens