fix(ui): git
This commit is contained in:
null
parent
f0eb706d82
commit
f59208c3ac
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"folders": [
|
||||
{
|
||||
"path": "."
|
||||
}
|
||||
],
|
||||
"settings": {}
|
||||
}
|
||||
|
|
@ -1236,10 +1236,6 @@ export default function DashboardPage() {
|
|||
<h3 className="text-lg font-semibold text-strong">
|
||||
Git Activity
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-muted">
|
||||
Issue contributions across all tracked repositories in the
|
||||
last 12 months.
|
||||
</p>
|
||||
</div>
|
||||
<ForgejoHeatmap
|
||||
days={forgejoHeatmapQuery.data?.days ?? []}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,20 @@
|
|||
import { useMemo, useState } from "react";
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import { CircleDot, ExternalLink, XCircle } from "lucide-react";
|
||||
CheckCircle2,
|
||||
CircleDot,
|
||||
ExternalLink,
|
||||
Loader2,
|
||||
Milestone,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { DataTable } from "@/components/tables/DataTable";
|
||||
import type { ForgejoIssue, ForgejoIssueLabel } from "@/lib/api-forgejo";
|
||||
import type { ForgejoRepository } from "@/lib/api-forgejo";
|
||||
import { CloseForgejoIssueDialog } from "@/components/git/CloseForgejoIssueDialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** Normalize a Forgejo label color to a valid 6-char hex string or null. */
|
||||
function normalizeLabelColor(raw: string | null | undefined): string | null {
|
||||
|
|
@ -40,7 +42,7 @@ function LabelChip({ label }: { label: ForgejoIssueLabel }) {
|
|||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="shrink-0 text-xs"
|
||||
className="max-w-[14rem] shrink-0 truncate px-2 py-0.5 text-[11px] normal-case tracking-normal"
|
||||
style={
|
||||
bg
|
||||
? { backgroundColor: bg, color: labelTextColor(bg), borderColor: bg }
|
||||
|
|
@ -53,6 +55,129 @@ function LabelChip({ label }: { label: ForgejoIssueLabel }) {
|
|||
);
|
||||
}
|
||||
|
||||
function formatDateTime(value: string | null | undefined): string {
|
||||
if (!value) return "Unknown date";
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return value;
|
||||
return date.toLocaleString(undefined, {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "short",
|
||||
});
|
||||
}
|
||||
|
||||
function formatRelativeTime(value: string | null | undefined): string {
|
||||
if (!value) return "unknown";
|
||||
const time = new Date(value).getTime();
|
||||
if (Number.isNaN(time)) return value;
|
||||
|
||||
const diffSeconds = Math.round((Date.now() - time) / 1000);
|
||||
const absSeconds = Math.abs(diffSeconds);
|
||||
const direction = diffSeconds >= 0 ? "ago" : "from now";
|
||||
const units = [
|
||||
{ max: 60, value: 1, name: "second" },
|
||||
{ max: 60 * 60, value: 60, name: "minute" },
|
||||
{ max: 60 * 60 * 24, value: 60 * 60, name: "hour" },
|
||||
{ max: 60 * 60 * 24 * 30, value: 60 * 60 * 24, name: "day" },
|
||||
{ max: 60 * 60 * 24 * 365, value: 60 * 60 * 24 * 30, name: "month" },
|
||||
{ max: Number.POSITIVE_INFINITY, value: 60 * 60 * 24 * 365, name: "year" },
|
||||
];
|
||||
const unit =
|
||||
units.find((candidate) => absSeconds < candidate.max) ?? units[0];
|
||||
const amount = Math.max(1, Math.round(absSeconds / unit.value));
|
||||
|
||||
if (amount <= 5 && unit.name === "second") {
|
||||
return diffSeconds >= 0 ? "just now" : "in a few seconds";
|
||||
}
|
||||
|
||||
return `${amount} ${unit.name}${amount === 1 ? "" : "s"} ${direction}`;
|
||||
}
|
||||
|
||||
function getAssigneeLogin(assignee: Record<string, unknown>): string | null {
|
||||
const login = assignee.login ?? assignee.username ?? assignee.name;
|
||||
return typeof login === "string" && login.trim() ? login : null;
|
||||
}
|
||||
|
||||
function getInitials(login: string): string {
|
||||
const normalized = login.trim();
|
||||
if (!normalized) return "?";
|
||||
const parts = normalized.split(/[\s._-]+/).filter(Boolean);
|
||||
if (parts.length >= 2) {
|
||||
return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
|
||||
}
|
||||
return normalized.slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
function AssigneeStack({ issue }: { issue: ForgejoIssue }) {
|
||||
const assignees = issue.assignees
|
||||
.map(getAssigneeLogin)
|
||||
.filter((login): login is string => login !== null);
|
||||
|
||||
if (assignees.length === 0) {
|
||||
return (
|
||||
<span className="whitespace-nowrap text-xs text-muted">Unassigned</span>
|
||||
);
|
||||
}
|
||||
|
||||
const visible = assignees.slice(0, 3);
|
||||
const overflow = assignees.length - visible.length;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-end -space-x-2"
|
||||
title={assignees.join(", ")}
|
||||
aria-label={`Assigned to ${assignees.join(", ")}`}
|
||||
>
|
||||
{visible.map((login) => (
|
||||
<span
|
||||
key={login}
|
||||
className="flex h-7 w-7 items-center justify-center rounded-full border-2 border-[color:var(--surface)] bg-[color:var(--surface-muted)] text-[10px] font-semibold text-strong shadow-sm"
|
||||
>
|
||||
{getInitials(login)}
|
||||
</span>
|
||||
))}
|
||||
{overflow > 0 ? (
|
||||
<span className="flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-[color:var(--surface)] bg-[color:var(--accent-soft)] px-1.5 text-[10px] font-semibold text-[color:var(--accent)] shadow-sm">
|
||||
+{overflow}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function IssueStateIcon({ state }: { state: string }) {
|
||||
const isOpen = state === "open";
|
||||
const Icon = isOpen ? CircleDot : CheckCircle2;
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center",
|
||||
isOpen ? "text-[color:var(--success)]" : "text-[color:var(--danger)]",
|
||||
)}
|
||||
title={isOpen ? "Open issue" : "Closed issue"}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function LoadingIssuesList() {
|
||||
return (
|
||||
<div className="divide-y divide-[color:var(--border)]">
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<div key={index} className="flex gap-3 px-4 py-4">
|
||||
<div className="mt-1 h-4 w-4 shrink-0 animate-pulse rounded-full bg-[color:var(--surface-muted)]" />
|
||||
<div className="min-w-0 flex-1 space-y-2">
|
||||
<div className="h-4 w-2/3 animate-pulse rounded bg-[color:var(--surface-muted)]" />
|
||||
<div className="h-3 w-1/2 animate-pulse rounded bg-[color:var(--surface-muted)]" />
|
||||
</div>
|
||||
<Loader2 className="h-4 w-4 animate-spin text-[color:var(--accent)]" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export type ForgejoIssuesTableProps = {
|
||||
issues: ForgejoIssue[];
|
||||
repositories: ForgejoRepository[];
|
||||
|
|
@ -81,173 +206,159 @@ export function ForgejoIssuesTable({
|
|||
}
|
||||
return map;
|
||||
}, [repositories]);
|
||||
const columns: ColumnDef<ForgejoIssue>[] = useMemo(
|
||||
() => [
|
||||
{
|
||||
id: "repository",
|
||||
header: "Repository",
|
||||
cell: ({ row }) => {
|
||||
const fallback = row.original.repository_id;
|
||||
return (
|
||||
<span className="block max-w-[220px] truncate text-muted">
|
||||
{repositoryNameById.get(row.original.repository_id) ?? fallback}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "forgejo_issue_number",
|
||||
header: "#",
|
||||
cell: ({ row }) => (
|
||||
<a
|
||||
href={row.original.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 font-mono text-sm text-[color:var(--accent)] hover:underline"
|
||||
>
|
||||
#{row.original.forgejo_issue_number}
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</a>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Title",
|
||||
cell: ({ row }) => (
|
||||
<div
|
||||
className="max-w-[28rem] truncate font-medium text-strong"
|
||||
title={row.original.title}
|
||||
>
|
||||
{row.original.title}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "state",
|
||||
header: "State",
|
||||
cell: ({ row }) => {
|
||||
const state = row.original.state;
|
||||
return (
|
||||
<Badge variant={state === "open" ? "success" : "default"}>
|
||||
{state}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "labels",
|
||||
header: "Labels",
|
||||
cell: ({ row }) => {
|
||||
const labels = row.original.labels;
|
||||
if (!labels || labels.length === 0) return null;
|
||||
const visible = labels.slice(0, 3);
|
||||
const overflow = labels.length - visible.length;
|
||||
return (
|
||||
<div className="flex max-w-[240px] flex-wrap gap-1">
|
||||
{visible.map((label, i) => (
|
||||
<LabelChip key={i} label={label} />
|
||||
))}
|
||||
{overflow > 0 && (
|
||||
<span className="self-center text-xs text-muted">
|
||||
+{overflow}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "assignee",
|
||||
header: "Assignee",
|
||||
cell: ({ row }) => {
|
||||
const assignee = row.original.assignees?.[0];
|
||||
const login =
|
||||
assignee &&
|
||||
typeof assignee === "object" &&
|
||||
"login" in assignee &&
|
||||
typeof assignee.login === "string"
|
||||
? assignee.login
|
||||
: null;
|
||||
|
||||
return (
|
||||
<span className="block max-w-[160px] truncate text-muted">
|
||||
{login || "Unassigned"}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "forgejo_updated_at",
|
||||
header: "Updated",
|
||||
cell: ({ row }) => {
|
||||
try {
|
||||
return (
|
||||
<span className="whitespace-nowrap text-muted">
|
||||
{new Date(row.original.forgejo_updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
);
|
||||
} catch {
|
||||
return (
|
||||
<span className="text-muted">
|
||||
{row.original.forgejo_updated_at}
|
||||
</span>
|
||||
);
|
||||
const issueCounts = useMemo(
|
||||
() =>
|
||||
issues.reduce(
|
||||
(counts, issue) => {
|
||||
if (issue.state === "closed") {
|
||||
counts.closed += 1;
|
||||
} else {
|
||||
counts.open += 1;
|
||||
}
|
||||
return counts;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "Actions",
|
||||
cell: ({ row }) => {
|
||||
const issue = row.original;
|
||||
const canShowClose =
|
||||
canClose && issue.state === "open" && !issue.is_pull_request;
|
||||
if (!canShowClose) {
|
||||
return null;
|
||||
}
|
||||
const repositoryName =
|
||||
repositoryNameById.get(issue.repository_id) ?? issue.repository_id;
|
||||
return (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 p-0 text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
|
||||
title={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
|
||||
onClick={() => {
|
||||
setIssueToClose(issue);
|
||||
setIsCloseDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<XCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
[canClose, repositoryNameById],
|
||||
{ open: 0, closed: 0 },
|
||||
),
|
||||
[issues],
|
||||
);
|
||||
const table = useReactTable({
|
||||
data: issues,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="overflow-hidden rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] shadow-lush">
|
||||
<DataTable
|
||||
table={table}
|
||||
isLoading={isLoading}
|
||||
loadingLabel="Loading Git Project issues…"
|
||||
tableClassName="min-w-[980px] w-full text-left text-sm"
|
||||
emptyState={{
|
||||
icon: <CircleDot className="h-12 w-12" />,
|
||||
title: "No Git Project issues found",
|
||||
description:
|
||||
"Sync a repository to pull issues into Pipeline, or adjust your filters.",
|
||||
}}
|
||||
/>
|
||||
<div className="flex flex-col gap-3 border-b border-[color:var(--border)] bg-[color:var(--surface-muted)] px-4 py-3 text-sm sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
<span className="inline-flex items-center gap-1.5 font-medium text-strong">
|
||||
<CircleDot className="h-4 w-4 text-[color:var(--success)]" />
|
||||
{issueCounts.open} Open
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1.5 text-muted">
|
||||
<CheckCircle2 className="h-4 w-4" />
|
||||
{issueCounts.closed} Closed
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-muted">
|
||||
{issues.length} visible issue{issues.length === 1 ? "" : "s"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<LoadingIssuesList />
|
||||
) : issues.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center px-6 py-16 text-center">
|
||||
<div className="mb-4 rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-[color:var(--text-muted)]">
|
||||
<CircleDot className="h-12 w-12" />
|
||||
</div>
|
||||
<h3 className="mb-2 text-lg font-semibold text-strong">
|
||||
No Git Project issues found
|
||||
</h3>
|
||||
<p className="max-w-md text-sm text-muted">
|
||||
Sync a repository to pull issues into Pipeline, or adjust your
|
||||
filters.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="divide-y divide-[color:var(--border)]">
|
||||
{issues.map((issue) => {
|
||||
const repositoryName =
|
||||
repositoryNameById.get(issue.repository_id) ??
|
||||
issue.repository_id;
|
||||
const visibleLabels = issue.labels.slice(0, 4);
|
||||
const hiddenLabelCount =
|
||||
issue.labels.length - visibleLabels.length;
|
||||
const updatedAt =
|
||||
issue.state === "closed"
|
||||
? issue.forgejo_closed_at || issue.forgejo_updated_at
|
||||
: issue.forgejo_updated_at;
|
||||
const stateVerb = issue.state === "closed" ? "closed" : "updated";
|
||||
const canShowClose =
|
||||
canClose && issue.state === "open" && !issue.is_pull_request;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={issue.id}
|
||||
className="group grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-3 px-4 py-4 transition-colors hover:bg-[color:var(--surface-muted)] sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:gap-x-4"
|
||||
>
|
||||
<IssueStateIcon state={issue.state} />
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<a
|
||||
href={issue.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="min-w-0 break-words text-sm font-semibold text-strong hover:text-[color:var(--accent)] hover:underline"
|
||||
title={issue.title}
|
||||
>
|
||||
{issue.title}
|
||||
</a>
|
||||
{visibleLabels.map((label, i) => (
|
||||
<LabelChip key={`${label.name}-${i}`} label={label} />
|
||||
))}
|
||||
{hiddenLabelCount > 0 ? (
|
||||
<span className="text-xs text-muted">
|
||||
+{hiddenLabelCount}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
|
||||
<span className="font-medium text-strong">
|
||||
{repositoryName}
|
||||
</span>
|
||||
<span className="font-mono">
|
||||
#{issue.forgejo_issue_number}
|
||||
</span>
|
||||
<span title={formatDateTime(updatedAt)}>
|
||||
{stateVerb} {formatRelativeTime(updatedAt)}
|
||||
</span>
|
||||
{issue.author ? <span>by {issue.author}</span> : null}
|
||||
{issue.milestone?.title ? (
|
||||
<span className="inline-flex min-w-0 items-center gap-1">
|
||||
<Milestone className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="truncate">
|
||||
{issue.milestone.title}
|
||||
</span>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-2 flex shrink-0 items-center justify-between gap-2 pl-7 sm:col-span-1 sm:min-w-[9rem] sm:justify-end sm:pl-0">
|
||||
<AssigneeStack issue={issue} />
|
||||
<div className="flex items-center gap-1">
|
||||
<a
|
||||
href={issue.html_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted transition-colors hover:bg-[color:var(--surface-strong)] hover:text-[color:var(--accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]"
|
||||
title={`Open ${repositoryName}#${issue.forgejo_issue_number} in Forgejo`}
|
||||
aria-label={`Open ${repositoryName}#${issue.forgejo_issue_number} in Forgejo`}
|
||||
>
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
</a>
|
||||
{canShowClose ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-8 w-8 rounded-lg p-0 text-[color:var(--danger)] hover:bg-[color:rgba(248,113,113,0.08)]"
|
||||
title={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
|
||||
aria-label={`Close ${repositoryName}#${issue.forgejo_issue_number}`}
|
||||
onClick={() => {
|
||||
setIssueToClose(issue);
|
||||
setIsCloseDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<XCircle className="h-4 w-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<CloseForgejoIssueDialog
|
||||
issue={issueToClose}
|
||||
|
|
|
|||
Loading…
Reference in New Issue