gitfor/platform

import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { listDiscussions } from "~/fns/discussions";
import { useViewer } from "~/hooks/use-viewer";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { buttonClass } from "~/ui/Button";
import { inputClass } from "~/ui/Field";
import { cn } from "~/utils/cn";

export const Route = createFileRoute("/$owner/$repo/discussions/")({
  validateSearch: z.object({
    category: z.string().optional(),
    q: z.string().optional(),
    page: z.number().int().min(1).optional(),
  }),
  loaderDeps: ({ search }) => search,
  loader: ({ params, deps }) =>
    listDiscussions({
      data: { owner: params.owner, repo: params.repo, category: deps.category, q: deps.q, page: deps.page ?? 1 },
    }),
  component: DiscussionsPage,
});

function DiscussionsPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  const viewer = useViewer();
  const navigate = useNavigate();
  const page = search.page ?? 1;

  return (
    <div className="grid gap-6 md:grid-cols-[220px_1fr]">
      <nav aria-label="Categories" className="flex flex-col gap-1 text-sm">
        <Link
          to="/$owner/$repo/discussions"
          params={params}