gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { z } from "zod";
import { listIssues } from "~/fns/issues";
import { listPinnedIssues } from "~/fns/planning";
import { IssueListPage } from "~/components/IssueListPage";
import { PinnedIssues } from "~/components/PinnedIssues";

export const Route = createFileRoute("/$owner/$repo/issues/")({
  validateSearch: z.object({
    state: z.enum(["open", "closed", "all"]).optional(),
    q: z.string().optional(),
    label: z.string().optional(),
    page: z.number().int().min(1).optional(),
  }),
  loaderDeps: ({ search }) => search,
  loader: async ({ params, deps }) => {
    const [list, pinned] = await Promise.all([
      listIssues({
        data: {
          owner: params.owner,
          repo: params.repo,
          kind: "issue",
          state: deps.state ?? "open",
          q: deps.q,
          label: deps.label,
          page: deps.page ?? 1,
        },
      }),
      listPinnedIssues({ data: { owner: params.owner, repo: params.repo } }),
    ]);
    return { ...list, pinned };
  },
  component: ListPage,
});

function ListPage() {
  const data = Route.useLoaderData();
  const search = Route.useSearch();
  const { owner, repo } = Route.useParams();
  return (