Build your first feature: UI

// features/projects/components/project-list.tsx
"use client";

import { useInfiniteQuery, useMutation } from "@tanstack/react-query";
import Link from "next/link";
import { rhf } from "@/client/forms";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  createProjectMutationOptions,
  projectsQueryOptions,
} from "../client/queries";
import { createProject } from "../contracts";

export function ProjectList() {
  const projects = useInfiniteQuery(projectsQueryOptions());
  const create = useMutation(createProjectMutationOptions());
  const form = rhf(createProject).useForm({
    defaultValues: { name: "", description: "" },
  });
  const submit = form.handleSubmit(async (body) => {
    form.clearErrors("root");
    try {
      await create.mutateAsync({ body });
      form.reset();
    } catch (error) {
      form.setError("root", {
        message:
          error instanceof Error ? error.message : "Could not create project.",
      });
    }
  });

  return (
    <div className="space-y-8">
      <h1 className="text-2xl font-semibold">Projects</h1>
      <form onSubmit={submit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="project-name">Name</Label>
          <Input
            id="project-name"
            readOnly={form.formState.isSubmitting}
            {...form.register("name")}
          />
          <p role="alert">{form.formState.errors.name?.message}</p>
        </div>
        <div className="space-y-2">
          <Label htmlFor="project-description">Description</Label>
          <Input
            id="project-description"
            readOnly={form.formState.isSubmitting}
            {...form.register("description")}
          />
          <p role="alert">{form.formState.errors.description?.message}</p>
        </div>
        <p role="alert">{form.formState.errors.root?.message}</p>
        <Button type="submit" disabled={form.formState.isSubmitting}>
          {form.formState.isSubmitting ? "Creating…" : "Create project"}
        </Button>
      </form>
      <section aria-label="Your projects" className="space-y-4">
        {projects.isPending && <p>Loading projects…</p>}
        {projects.isError && (
          <div role="alert">
            <p>{projects.error.message}</p>
            <Button type="button" onClick={() => void projects.refetch()}>
              Try again
            </Button>
          </div>
        )}
        {projects.data?.pages.every((page) => page.items.length === 0) && (
          <p>No projects yet. Create your first one above.</p>
        )}
        <ul className="space-y-3">
          {projects.data?.pages
            .flatMap((page) => page.items)
            .map((project) => (
              <li key={project.id}>
                <Link className="underline" href={`/projects/${project.id}`}>
                  {project.name}
                </Link>
                <p className="text-sm text-muted-foreground">
                  {project.description}
                </p>
              </li>
            ))}
        </ul>
        {projects.hasNextPage && (
          <Button
            type="button"
            disabled={projects.isFetchingNextPage}
            onClick={() => void projects.fetchNextPage()}
          >
            {projects.isFetchingNextPage ? "Loading…" : "Load more"}
          </Button>
        )}
      </section>
    </div>
  );
}

// features/projects/components/project-detail.tsx
"use client";

import { useMutation, useQuery } from "@tanstack/react-query";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { rq } from "@/client";
import { rhf } from "@/client/forms";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  deleteProjectMutationOptions,
  updateProjectMutationOptions,
} from "../client/queries";
import { getProject, updateProject } from "../contracts";
import type { Project } from "../schemas";

export function ProjectDetail({ id }: { id: string }) {
  const project = useQuery(rq(getProject).queryOptions({ path: { id } }));
  if (project.isPending) return <p>Loading project…</p>;
  if (!project.data)
    return (
      <div role="alert">
        <p>{project.error?.message ?? "Could not load project."}</p>
        <Button type="button" onClick={() => void project.refetch()}>
          Try again
        </Button>
        <Link href="/projects">Back to projects</Link>
      </div>
    );
  return (
    <div className="space-y-4">
      {project.isError && (
        <p role="alert">
          Could not refresh this project. Your draft is still open.
          {" "}{project.error.message}
        </p>
      )}
      <ProjectEditor key={id} project={project.data} />
    </div>
  );
}

function ProjectEditor({ project }: { project: Project }) {
  const router = useRouter();
  const update = useMutation(updateProjectMutationOptions());
  const remove = useMutation(deleteProjectMutationOptions());
  const form = rhf(updateProject).useForm({
    defaultValues: {
      name: project.name,
      description: project.description ?? "",
      version: project.version,
    },
  });
  const { isDirty, isSubmitting } = form.formState;
  const { getValues, reset } = form;
  const busy = isSubmitting || remove.isPending;
  useEffect(() => {
    if (!isDirty && !busy && project.version > getValues("version")) {
      reset({
        name: project.name,
        description: project.description ?? "",
        version: project.version,
      });
    }
  }, [busy, getValues, isDirty, project, reset]);
  const submit = form.handleSubmit(async (body) => {
    form.clearErrors("root");
    try {
      const saved = await update.mutateAsync({
        path: { id: project.id },
        body,
      });
      form.reset({
        name: saved.name,
        description: saved.description ?? "",
        version: saved.version,
      });
    } catch (error) {
      form.setError("root", {
        message:
          error instanceof Error ? error.message : "Could not save project.",
      });
    }
  });
  async function deleteCurrentProject() {
    if (!window.confirm("Delete this project?")) return;
    try {
      await remove.mutateAsync({ path: { id: project.id } });
      router.push("/projects");
    } catch {
      // The mutation error is rendered below; keep the current page open.
    }
  }

  return (
    <div className="space-y-6">
      <Link href="/projects" className="underline">
        Back to projects
      </Link>
      <h1 className="text-2xl font-semibold">Edit project</h1>
      <form onSubmit={submit} className="space-y-4">
        <input
          type="hidden"
          {...form.register("version", { valueAsNumber: true })}
        />
        <div className="space-y-2">
          <Label htmlFor="project-name">Name</Label>
          <Input
            id="project-name"
            readOnly={busy}
            {...form.register("name")}
          />
          <p role="alert">{form.formState.errors.name?.message}</p>
        </div>
        <div className="space-y-2">
          <Label htmlFor="project-description">Description</Label>
          <Input
            id="project-description"
            readOnly={busy}
            {...form.register("description")}
          />
          <p role="alert">{form.formState.errors.description?.message}</p>
        </div>
        <p role="alert">{form.formState.errors.root?.message}</p>
        <Button type="submit" disabled={busy}>
          {form.formState.isSubmitting ? "Saving…" : "Save project"}
        </Button>
      </form>
      <p className="text-sm text-muted-foreground">
        If another tab changed this project, reload before saving again.
        Reloading discards your unsaved edits.
      </p>
      <Button
        type="button"
        variant="outline"
        disabled={busy}
        onClick={() => window.location.reload()}
      >
        Reload project
      </Button>
      <div>
        <Button
          type="button"
          variant="destructive"
          disabled={busy}
          onClick={() => void deleteCurrentProject()}
        >
          {remove.isPending ? "Deleting…" : "Delete project"}
        </Button>
        {remove.isError && <p role="alert">{remove.error.message}</p>}
      </div>
    </div>
  );
}