| 0b4b582 | | | 1 | "use client"; |
| 0b4b582 | | | 2 | |
| 0b4b582 | | | 3 | import { useState } from "react"; |
| 0b4b582 | | | 4 | import Link from "next/link"; |
| 0b4b582 | | | 5 | import { CollabLogo } from "@/app/components/collab-logo"; |
| 0b4b582 | | | 6 | |
| 0b4b582 | | | 7 | interface Repo { |
| 0b4b582 | | | 8 | name: string; |
| 0b4b582 | | | 9 | owner_name: string; |
| 0b4b582 | | | 10 | description: string | null; |
| 0b4b582 | | | 11 | last_commit_ts: number | null; |
| 0b4b582 | | | 12 | updated_at: string | null; |
| 0b4b582 | | | 13 | } |
| 0b4b582 | | | 14 | |
| 0b4b582 | | | 15 | function timeAgo(ts: number): string { |
| 0b4b582 | | | 16 | const secs = Math.floor(Date.now() / 1000) - ts; |
| 0b4b582 | | | 17 | if (secs < 60) return "just now"; |
| 0b4b582 | | | 18 | if (secs < 3600) return Math.floor(secs / 60) + "m ago"; |
| 0b4b582 | | | 19 | if (secs < 86400) return Math.floor(secs / 3600) + "h ago"; |
| 0b4b582 | | | 20 | if (secs < 2592000) return Math.floor(secs / 86400) + "d ago"; |
| 0b4b582 | | | 21 | return Math.floor(secs / 2592000) + "mo ago"; |
| 0b4b582 | | | 22 | } |
| 0b4b582 | | | 23 | |
| 0b4b582 | | | 24 | function groupByOwner(repos: Repo[]): { owner: string; repos: Repo[] }[] { |
| 0b4b582 | | | 25 | const map = new Map<string, Repo[]>(); |
| 0b4b582 | | | 26 | for (const r of repos) { |
| 0b4b582 | | | 27 | const list = map.get(r.owner_name) ?? []; |
| 0b4b582 | | | 28 | list.push(r); |
| 0b4b582 | | | 29 | map.set(r.owner_name, list); |
| 0b4b582 | | | 30 | } |
| 0b4b582 | | | 31 | return Array.from(map, ([owner, repos]) => ({ owner, repos })); |
| 0b4b582 | | | 32 | } |
| 0b4b582 | | | 33 | |
| 0b4b582 | | | 34 | export function CollabRepoList({ repos }: { repos: Repo[] }) { |
| 0b4b582 | | | 35 | const [query, setQuery] = useState(""); |
| 0b4b582 | | | 36 | |
| 0b4b582 | | | 37 | const sorted = [...repos].sort((a, b) => { |
| 0b4b582 | | | 38 | const aTs = a.last_commit_ts ?? (a.updated_at ? Math.floor(new Date(a.updated_at).getTime() / 1000) : 0); |
| 0b4b582 | | | 39 | const bTs = b.last_commit_ts ?? (b.updated_at ? Math.floor(new Date(b.updated_at).getTime() / 1000) : 0); |
| 0b4b582 | | | 40 | return bTs - aTs; |
| 0b4b582 | | | 41 | }); |
| 0b4b582 | | | 42 | |
| 0b4b582 | | | 43 | const filtered = query |
| 0b4b582 | | | 44 | ? sorted.filter((r) => |
| 0b4b582 | | | 45 | `${r.owner_name} ${r.name} ${r.description ?? ""}`.toLowerCase().includes(query.toLowerCase()) |
| 0b4b582 | | | 46 | ) |
| 0b4b582 | | | 47 | : sorted; |
| 0b4b582 | | | 48 | |
| 0b4b582 | | | 49 | const groups = groupByOwner(filtered); |
| 0b4b582 | | | 50 | |
| 0b4b582 | | | 51 | return ( |
| 0b4b582 | | | 52 | <div className="max-w-3xl mx-auto px-4 py-6 flex flex-col gap-4"> |
| 0b4b582 | | | 53 | <input |
| 0b4b582 | | | 54 | type="text" |
| 0b4b582 | | | 55 | placeholder="Search repositories" |
| 0b4b582 | | | 56 | value={query} |
| 0b4b582 | | | 57 | onChange={(e) => setQuery(e.target.value)} |
| 0b4b582 | | | 58 | className="w-full px-3 py-2 text-sm" |
| 0b4b582 | | | 59 | style={{ |
| 0b4b582 | | | 60 | backgroundColor: "var(--bg-input)", |
| 0b4b582 | | | 61 | border: "1px solid var(--border)", |
| 0b4b582 | | | 62 | color: "var(--text-primary)", |
| 0b4b582 | | | 63 | outline: "none", |
| 0b4b582 | | | 64 | }} |
| 0b4b582 | | | 65 | /> |
| 0b4b582 | | | 66 | |
| 0b4b582 | | | 67 | {groups.length === 0 && ( |
| 0b4b582 | | | 68 | <div className="py-8 text-center"> |
| 0b4b582 | | | 69 | <div className="mx-auto mb-4 w-fit opacity-50"> |
| 0b4b582 | | | 70 | <CollabLogo size={48} /> |
| 0b4b582 | | | 71 | </div> |
| 0b4b582 | | | 72 | <p className="text-sm" style={{ color: "var(--text-faint)" }}> |
| 0b4b582 | | | 73 | No repositories found. |
| 0b4b582 | | | 74 | </p> |
| 0b4b582 | | | 75 | </div> |
| 0b4b582 | | | 76 | )} |
| 0b4b582 | | | 77 | |
| 0b4b582 | | | 78 | {groups.map((group) => ( |
| 0b4b582 | | | 79 | <div key={group.owner}> |
| 0b4b582 | | | 80 | <div |
| 0b4b582 | | | 81 | className="text-xs font-medium uppercase tracking-wide mb-2 px-1" |
| 0b4b582 | | | 82 | style={{ color: "var(--text-faint)" }} |
| 0b4b582 | | | 83 | > |
| 0b4b582 | | | 84 | {group.owner} |
| 0b4b582 | | | 85 | </div> |
| 0b4b582 | | | 86 | <div> |
| 0b4b582 | | | 87 | {group.repos.map((r) => { |
| 0b4b582 | | | 88 | const commitTs = r.last_commit_ts ?? null; |
| 0b4b582 | | | 89 | const updatedTs = r.updated_at |
| 0b4b582 | | | 90 | ? Math.floor(new Date(r.updated_at).getTime() / 1000) |
| 0b4b582 | | | 91 | : null; |
| 0b4b582 | | | 92 | const ts = commitTs ?? updatedTs; |
| 0b4b582 | | | 93 | const label = commitTs ? "Pushed" : updatedTs ? "Updated" : null; |
| 0b4b582 | | | 94 | |
| 0b4b582 | | | 95 | return ( |
| 0b4b582 | | | 96 | <Link |
| 0b4b582 | | | 97 | key={`${r.owner_name}/${r.name}`} |
| 0b4b582 | | | 98 | href={`/${r.owner_name}/${r.name}`} |
| 0b4b582 | | | 99 | className="flex items-center justify-between py-2.5 px-1 hover-row" |
| 0b4b582 | | | 100 | style={{ |
| 0b4b582 | | | 101 | borderBottom: "1px solid var(--divide)", |
| 0b4b582 | | | 102 | textDecoration: "none", |
| 0b4b582 | | | 103 | color: "inherit", |
| 0b4b582 | | | 104 | }} |
| 0b4b582 | | | 105 | > |
| 0b4b582 | | | 106 | <div style={{ minWidth: 0 }}> |
| 0b4b582 | | | 107 | <div className="text-sm" style={{ color: "var(--accent)" }}> |
| 0b4b582 | | | 108 | {r.name} |
| 0b4b582 | | | 109 | </div> |
| 0b4b582 | | | 110 | <div className="text-xs" style={{ color: "var(--text-faint)" }}> |
| 0b4b582 | | | 111 | {r.description || "No description"} |
| 0b4b582 | | | 112 | </div> |
| 0b4b582 | | | 113 | </div> |
| 0b4b582 | | | 114 | {ts && label && ( |
| 0b4b582 | | | 115 | <span |
| 0b4b582 | | | 116 | className="text-xs shrink-0 ml-4" |
| 0b4b582 | | | 117 | style={{ color: "var(--text-faint)" }} |
| 0b4b582 | | | 118 | > |
| 0b4b582 | | | 119 | {label} {timeAgo(ts)} |
| 0b4b582 | | | 120 | </span> |
| 0b4b582 | | | 121 | )} |
| 0b4b582 | | | 122 | </Link> |
| 0b4b582 | | | 123 | ); |
| 0b4b582 | | | 124 | })} |
| 0b4b582 | | | 125 | </div> |
| 0b4b582 | | | 126 | </div> |
| 0b4b582 | | | 127 | ))} |
| 0b4b582 | | | 128 | </div> |
| 0b4b582 | | | 129 | ); |
| 0b4b582 | | | 130 | } |