| d12933e | | | 1 | import type { Metadata } from "next"; |
| d12933e | | | 2 | import Link from "next/link"; |
| bc1b2ba | | | 3 | import { timeAgoFromDate } from "@/lib/utils"; |
| bc1b2ba | | | 4 | import { getRepoDiffs } from "@/lib/grove-api"; |
| d12933e | | | 5 | |
| d12933e | | | 6 | interface Props { |
| d12933e | | | 7 | params: Promise<{ owner: string; repo: string }>; |
| d12933e | | | 8 | searchParams: Promise<{ status?: string }>; |
| d12933e | | | 9 | } |
| d12933e | | | 10 | |
| d12933e | | | 11 | export async function generateMetadata({ params }: Props): Promise<Metadata> { |
| d12933e | | | 12 | const { repo } = await params; |
| d12933e | | | 13 | return { title: `Diffs · ${repo}` }; |
| d12933e | | | 14 | } |
| d12933e | | | 15 | |
| d12933e | | | 16 | |
| d12933e | | | 17 | const statusStyles: Record<string, { bg: string; text: string; border: string }> = { |
| d12933e | | | 18 | open: { bg: "var(--status-open-bg)", text: "var(--status-open-text)", border: "var(--status-open-border)" }, |
| 2ec6868 | | | 19 | landed: { bg: "var(--status-merged-bg)", text: "var(--status-merged-text)", border: "var(--status-merged-border)" }, |
| d12933e | | | 20 | closed: { bg: "var(--status-closed-bg)", text: "var(--status-closed-text)", border: "var(--status-closed-border)" }, |
| d12933e | | | 21 | }; |
| d12933e | | | 22 | |
| d12933e | | | 23 | export default async function DiffsPage({ |
| d12933e | | | 24 | params, |
| d12933e | | | 25 | searchParams, |
| d12933e | | | 26 | }: Props) { |
| d12933e | | | 27 | const { owner, repo } = await params; |
| d12933e | | | 28 | const { status: statusParam } = await searchParams; |
| d12933e | | | 29 | const status = statusParam ?? "open"; |
| d12933e | | | 30 | |
| bc1b2ba | | | 31 | const data = await getRepoDiffs(owner, repo, status); |
| d12933e | | | 32 | |
| d12933e | | | 33 | return ( |
| d12933e | | | 34 | <> |
| d12933e | | | 35 | <div className="flex items-center justify-between mb-4"> |
| d12933e | | | 36 | <div className="flex gap-4 text-sm"> |
| 2ec6868 | | | 37 | {(["open", "landed", "closed"] as const).map((s) => ( |
| d12933e | | | 38 | <Link |
| d12933e | | | 39 | key={s} |
| d12933e | | | 40 | href={`/${owner}/${repo}/diffs?status=${s}`} |
| d12933e | | | 41 | className="capitalize" |
| d12933e | | | 42 | style={{ |
| d12933e | | | 43 | color: status === s ? "var(--text-primary)" : "var(--text-muted)", |
| d12933e | | | 44 | fontWeight: status === s ? 600 : 400, |
| d12933e | | | 45 | }} |
| d12933e | | | 46 | > |
| d12933e | | | 47 | {s} |
| d12933e | | | 48 | </Link> |
| d12933e | | | 49 | ))} |
| d12933e | | | 50 | </div> |
| 55e9501 | | | 51 | <Link |
| 55e9501 | | | 52 | href={`/${owner}/${repo}/diffs/new`} |
| 55e9501 | | | 53 | className="text-sm px-3 py-1" |
| 55e9501 | | | 54 | style={{ |
| 55e9501 | | | 55 | backgroundColor: "var(--accent)", |
| 55e9501 | | | 56 | color: "var(--accent-text)", |
| 55e9501 | | | 57 | }} |
| 55e9501 | | | 58 | > |
| 55e9501 | | | 59 | New diff |
| 55e9501 | | | 60 | </Link> |
| d12933e | | | 61 | </div> |
| d12933e | | | 62 | |
| d12933e | | | 63 | {data?.diffs?.length ? ( |
| d12933e | | | 64 | <div style={{ border: "1px solid var(--border-subtle)" }}> |
| d12933e | | | 65 | <table className="w-full text-sm"> |
| d12933e | | | 66 | <tbody> |
| d12933e | | | 67 | {data.diffs.map((d: any, i: number) => { |
| d12933e | | | 68 | const style = statusStyles[d.status ?? status] ?? statusStyles.open; |
| d12933e | | | 69 | return ( |
| d12933e | | | 70 | <tr |
| d12933e | | | 71 | key={d.id} |
| d12933e | | | 72 | className="hover-row" |
| d12933e | | | 73 | style={{ |
| d12933e | | | 74 | borderTop: |
| d12933e | | | 75 | i > 0 ? "1px solid var(--divide)" : undefined, |
| d12933e | | | 76 | }} |
| d12933e | | | 77 | > |
| d12933e | | | 78 | <td className="py-2.5 pl-3 pr-3"> |
| d12933e | | | 79 | <div className="flex items-center gap-2"> |
| d12933e | | | 80 | <span |
| d12933e | | | 81 | className="text-xs px-1.5 py-0.5 shrink-0" |
| d12933e | | | 82 | style={{ |
| d12933e | | | 83 | backgroundColor: style.bg, |
| d12933e | | | 84 | color: style.text, |
| d12933e | | | 85 | border: `1px solid ${style.border}`, |
| d12933e | | | 86 | }} |
| d12933e | | | 87 | > |
| d12933e | | | 88 | {d.status ?? status} |
| d12933e | | | 89 | </span> |
| d12933e | | | 90 | <Link |
| d12933e | | | 91 | href={`/${owner}/${repo}/diffs/${d.number}`} |
| d12933e | | | 92 | className="hover:underline truncate" |
| d12933e | | | 93 | style={{ color: "var(--accent)" }} |
| d12933e | | | 94 | > |
| d12933e | | | 95 | {d.title} |
| d12933e | | | 96 | </Link> |
| d12933e | | | 97 | </div> |
| d12933e | | | 98 | <div |
| d12933e | | | 99 | className="text-xs mt-0.5 ml-0" |
| d12933e | | | 100 | style={{ color: "var(--text-muted)" }} |
| d12933e | | | 101 | > |
| d12933e | | | 102 | D{d.number} by {d.author_name} |
| d12933e | | | 103 | </div> |
| d12933e | | | 104 | </td> |
| d12933e | | | 105 | <td |
| 2ec6868 | | | 106 | className="py-2 text-xs font-mono text-right w-28 hidden sm:table-cell" |
| d12933e | | | 107 | style={{ color: "var(--text-faint)" }} |
| d12933e | | | 108 | > |
| 2ec6868 | | | 109 | {d.head_commit?.slice(0, 8)} |
| d12933e | | | 110 | </td> |
| d12933e | | | 111 | <td |
| d12933e | | | 112 | className="py-2 pr-3 text-xs text-right w-20" |
| d12933e | | | 113 | style={{ color: "var(--text-faint)" }} |
| d12933e | | | 114 | > |
| d12933e | | | 115 | {timeAgoFromDate(d.created_at)} |
| d12933e | | | 116 | </td> |
| d12933e | | | 117 | </tr> |
| d12933e | | | 118 | ); |
| d12933e | | | 119 | })} |
| d12933e | | | 120 | </tbody> |
| d12933e | | | 121 | </table> |
| d12933e | | | 122 | </div> |
| d12933e | | | 123 | ) : ( |
| d12933e | | | 124 | <p className="text-sm py-8 text-center" style={{ color: "var(--text-faint)" }}> |
| d12933e | | | 125 | No {status} diffs. |
| d12933e | | | 126 | </p> |
| d12933e | | | 127 | )} |
| d12933e | | | 128 | </> |
| d12933e | | | 129 | ); |
| d12933e | | | 130 | } |